January 15 2014

Jquery plugin tablesorter filter match how to

Tagged Under :

jquery
Jquery tablesorter is a powerful plugin for table sort and filter. It help me completed a lot of stuff.

But I found a problem, when I want filter by exact match results, the default filter function cannot do this. And I try add “filter-match” classes to the “th” header cells. Unfortunately the results return still same.

The Solution:
To filter by exact match, you may need modify or add “filter_functions” at the “widgetOptions“. The example:
widgetOptions : {
  filter_functions: {
    2 : function(e, n, f, i, $r) {
      return e === f;
    },
  },
}
The 2 number is meaning which cell you want to apply.

Below is showing how the code look like:
$("table#summary").tablesorter({
  sortList: [[0,0], [1,0]],
  widgets: ['filter'],
  headers: {},
  widgetOptions : {
    filter_childRows : false,
    filter_columnFilters : true,
    filter_cssFilter : 'tablesorter-filter',
    filter_filteredRow   : 'filtered',
    filter_formatter : null,
    filter_functions : {
      2 : function(e, n, f, i, $r) {
        return e === f;
      },
    },
    filter_hideFilters : false,
    filter_ignoreCase : true,
    filter_liveSearch : true,
    filter_reset : 'button.summaryreset',
    filter_searchDelay : 300,
    filter_serversideFiltering: false,
    filter_startsWith : false,
    filter_useParsedData : false
  }
})

You can refer link below to understanding how to set the widget.
http://mottie.github.io/tablesorter/docs/#Widget-options

Make a Comment

You must be logged in to post a comment.