Search code examples
javascriptjquerytablesorter

Tablesorter external search input bar failing on jquery insertion


I am trying to write a js function that will trigger the insertion of a search bar at the top of my table because I have a lot of pages that need it and I hate duplicating code. However, this search bar with class search is executed after my main .tablesorter js.

All my efforts of triggering update have failed. I even tried executing the .tablesorter script in the console exactly as it executes before I insert the input bar. The external search bar works amazing if I just leave it in the html, but I cannot get it to trigger any sort as soon as jquery is involved.

I wonder if I could signal the js to execute immediately because my tablesorter waits until page load...

filter_functions : {
                    filter_placeholder: { search : 'Search...' },
                    filter_saveFilters : true
                },
                //FOR SEARCH BAR
                filter_external : '.search',

...

jQuery(".buttons-on-right").prepend

Solution

  • There is an internal filter function (bindSearch) that allows for the binding of external search inputs after tablesorter has initialized. Use it as follows:

    var table = $('#mytable'),
      input = $('.search');
    // the third parameter (set as false) forces a new search
    // on the current value of the newly added input; do not
    // include the third parameter to silently add the new input
    $.tablesorter.filter.bindSearch(table, input, false);
    

    Note: The external input must have a data-column="#" attribute before it will work. The # is set as the zero-based column index, or set as all to search all columns.