Compulsivo

TableSorter: Filter Results Based on Search Query

So, you want to use the TableSorter jQuery plugin and you want to be able to search the table and filter the results. Attached is a companion plugin we’ve written, called tablesorterFilter, which will extend tablesorter to provide real-time filtering of rows which match a search query!

Usage

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

Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>
 
<table id="myTable">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
  </tbody>
</table>

Configuration

tablesorterFilter takes up to six parameters:

• filterContainer - The DOM id of the input box where the user will type the search string.
• filterClearContainer - (optional) The DOM id of the button, image, or whatever which will clear the search string and reset the table to it’s original, unfiltered state.
• filterColumns - An array of columns, starting at 0, which will be searched.
• filterCaseSensitive - (optional) Boolean stating whether the search string is case sensitive. The default is false.
• filterWaitTime - (optional) Time after last key press to start filtering. The default is 500 (milliseconds).
• filterFunction - (optional) Custom function to filter by column text. The default is the plugin function has_words.

Requirements

jQuery version 1.2.1 or higher and a slightly modified jquery.tablesorter.js version 2.0.3.

The modification to the original tablesorter plugin is the addition of a few lines which will cache all of the rows so they can be searched. You can download the modified jquery.tablesorter.js code below.

Download

jquery.tablesorter.filter.js

jquery.tablesorter.js 2.0.3 (modified for tablesorterFilter)

Updated blog post on 1-April-2009 to reflect two additional configuration parameters.

Tags: javascript, jquery