tablesorter

Custom Filter Widget

Flexible client-side table sorting

NOTE! Custom filter widget option filter_functions was added in version 2.3.6:

• Default Select - See the "First Name" column below.
  • To enable this type of select, set the filter_functions option for the column to true, and/or add a "filter-select" class to the column header cell.
  • The default option text, "Select a name", is obtained from the header data-placeholder attribute of the column header cell. And when active, it will show all table rows.
  • The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.
  • Select options are automatically sorted.
• Custom Select - See the "Total" column.
  • To enable this type of select, add your custom options within the filter_functions option.
  • Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option. See the example below.
  • See the filter function information below.
• Custom Filter Function - See the "Last Name" column.
  • To enable this type of filter, add your custom function to the filter_functions option following the example below.
  • The example below shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the filter_searchDelay option to be a bit longer.
  • Also, the example only checks for an exact match (===) meaning the filter_ignoreCase option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.
  • See the filter function information below.
• Filter function information:
  • The custom function must return a boolean value. If true is returned, the row will be shown if all other filters match; and if false is returned, the row will be hidden.
  • The exact text (e) of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.
  • Normalized table cell data (n) is the next varibale passed to the function.
    • This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect.
    • Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting.
    • The data will be in lower-case if the filter_ignoreCase option is true.
    • Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).
    • The percentage column will only store the number and not percentage sign.
  • The filter input value (f) is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons.
  • The column index (i) might be useful for obtaining more information from header, or something.

Demo

Javascript

HTML