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.


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">
            <th>Last Name</th>
            <th>First Name</th>

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

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