Client side table sorting and filtering with jQuery tablesorter

Ran into an awesome jQuery plugin today while trying to find a quick way to add filtering and sorting to a table on the client machine rather than on the server side. It’s called TableSorter.

You can easily enable client side filtering, sorting and paging with a few lines of javascript and a multitude of options to customize it to your needs.

Here’s a demo. You can click on the headers to sort or type into the textbox to filter by FirstName or LastName.

Search:

Last Name	First Name	Owing
King	Justin	$22.00
Liu	John	$35.00
Truong	Michelle	$100.00
Gfader	Peter	$50.00

This was implemented as follows:

<table id="myTable" border="1">
    <thead> 
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Owing</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>King</td>
            <td>Justin</td>
            <td>$22.00</td>
        </tr>
        <tr>
            <td>Liu</td>
            <td>John</td>
            <td>$35.00</td>
        </tr>
        <tr>
            <td>Truong</td>
            <td>Michelle</td>
            <td>$100.00</td>
        </tr>
        <tr>
            <td>Gfader</td>
            <td>Peter</td>
            <td>$50.00</td>
        </tr>
    </tbody>
</table>

Then add the following to your jQuery’s document.ready function.

  jQuery(document).ready(function() {
    $("#myTable")
      .tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]})
      .tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0,1],
                          filterCaseSensitive: false});
  });

Comments

[Justin King]

Check is in the mail :P

[Anthony]

Great blog Eric. Table sorter/search is awesome!!!