Notes

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