Search code examples
tablesorter

How to filter search using tablesorter


I'm using the tablesorter search/filter plugin to search names from a list. so when i type in a letter corresponding to the letters in the list will display. I used this: http://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html as a reference. Below is my code:

var $table = $('#table').tablesorter({
    sortList: [[0,0], [1,0]],
    theme: 'blue',
    widgets: ["zebra", "filter"],
    widgetOptions : {
        filter_columnFilters: false,
        filter_saveFilters : true,
    }
}); 
$.tablesorter.filter.bindSearch( $table, $('.search-subaccounts') );

HTML:

<input class="search-subaccounts" type="search" data-column="1"/>

I'm trying to filter names based on first name. so when i try to execute it, gives me the following error:

Uncaught TypeError: Cannot read property 'bindSearch' of undefined 

I dont know why it says 'filter' is undefined whereas i tried executing exactly the way its in the demo. What did i do wrong here? Any ideas??


Solution

  • It sounds like the widget file isn't being included since the bindSearch function isn't being found - it's included with the filter widget. Make sure you load the following files on your page (theme file name will vary depending on your choice):

    <link rel="stylesheet" href="css/theme.blue.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.tablesorter.min.js"></script>
    <script src="js/jquery.tablesorter.widgets.min.js"></script>