Notes

  • This is a demo of the filter_external option (added v2.15).
  • In v2.15
    • The filter_anyMatch has been removed (added v2.13.3; removed in v2.15)
    • A new option filter_external has been added. It is set to a jQuery selector string ('.search') or jQuery object ($('.search')) targetting an external input.
    • So now a table can include both a filter row (filter_columnFilters is true, i.e. the internal table filters) and any number of external search inputs (as set by the filter_external option).
    • The external search results must have a data-column="#" attribute set, where # is the index of the column (zero-based) that the input targets, to have an input search all table content, set the data column attribute to "all" to match any column.
    • The $.tablesorter.bindSearch function (see demo) does exactly the same thing as the filter_external option. The major difference is seen when using ajax to populate the table, the initial filter values can be set before tablesorter initialization when using teh filter_external option; whereas, the bind search function can not set initial filter values and is usually executed after tablesorter initialization.

Limitations

  • The any-match search method has limitations applied. It does not support all of the per column search features! So, at this time, the following types of queries are not allowed as the results will cause confusion:
    • Search operators - A search for values equal, greater or less than values (> >= <= <) is not allowed because tables that contain both numbers and text (in separate columns). For example:
      "Fred" > "1"  // true*
      "Fred" < "10" // false
      "Fred" > 1    // false (numeric comparisons occur with parsed table data)
      "Fred" > 1    // false
      "Fred" < 10   // false
      * For comparisons, letters have a greater ASCII value than numbers.
    • Range query - A search for any number range (1 - 10) is not allowed because, if any columns contain text, then no rows will result. The examples are the same as the search operators examples above.
    • Not Match query - A search for not matches (!a) is not allowed because tables that contain both numbers and text (in separate columns) will always show all rows. For example:
      "Frank".search("a")    //  2 (a match, so this row "may" be hidden)
      "Fred".search("a")      // -1 (a not match! so this row will always show)
      "25".search("a")        // -1 (a not match! so this row will always show)
      "1/1/2014".search("a")  // -1 (a not match! so this row will always show)
    • Allowed filters include plain text matching, fuzzy search (~), exact match ("), wild card matches( ? or *), regex (/\d/g), and logical and (a && b)/or (a|b) matches.
  • Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values, like this:
    // apply "2?%" filter to the fifth column (zero-based index)
    var columns = [];
    columns[5] = '2?%';
    // anyMatch will kick in on undefined column filters,
    // unless the array looks like this: columns = [ '', '', '', '', '', '2?%' ]
    $('table').trigger('search', [ columns ]);

Demo

(Match any column)
(First Name)
Rank First Name Last Name Age Total Discount Date
1Philip AaronJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AaronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterParker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKent Sr.18$15.8944%Jan 12, 2003 11:14 AM
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumass13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Bruce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda LeeMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennisBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM

Javascript


	

HTML


	

Next up: jQuery custom filter widget external inputs ››