Notes

  • As of v2.18.0,
    • An external input data-column can now target multiple columns:
      • When designating a column for an external input, you can now set multiple columns and/or a range of columns (e.g. data-column="0-2,4,6-7".
      • This type of search acts essentially the same as when the column is set to "all" in that "range", "notMatch" and "operators" searches are ignored.
      • The last search performed using either multiple columns or "all" columns will override all other queries; meaning the other inputs won't clear or update (e.g. performing a search for "foo" in an "all" column search input will override any previous searchs, and the input with a data-column="0-2,4,6-7" will not change its value) - this might be confusing to the user if multiple inputs are visible on the page (placeholder text won't help).
      • The selector in the demo below has two additional options: "Columns 0,3" and "Columns 1-2"; as you can see, switching the column to search between "all", "0,3" and "1-2" does not change the query.
  • As of v2.15,
    • A new filter widget filter_external option has been added that essentially does the same thing as the $.tablesorter.bindSearch function.
    • Use either to bind external search inputs.
    • To change an input from searching one column (or all columns) to search any other column, call the $.tablesorter.bindSearch function to update the external inputs, even if the inputs are set using the filter_external option. Pass an additional false flag as the last parameter to force the inputs to update.
      $.tablesorter.bindSearch( $('table'), $('.search'), false );
    • This demo shows how to use multiple external search filters to filter the table, and how to make one input dynamically change to filter any or all columns.
  • The $.tablesorter.filter.bindSearch function allows binding multiple external search filters
  • The advantage of using this function over your own is:
    • Inputs behave the same as internal filters; searches adhere to the filter_liveSearch and filter_searchDelay options.
    • When pressing the Esc key, the filter resets.
  • Include a data-column="#" attribute to specify to which column the search should apply; or data-column="all" to search all columns.

Demo




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 ››