Search code examples
tablesorter

Tablesorter plugin, trigger('search', ...) not triggering


I am using Table sorter to create a number of pages with tables on them. I need to add a "Last Week / Month / Year" search function for the dates (which I managed) but the code is only executing the first time I use one of the buttons.

I made a demo at http://garciaoliver.com/cosas/table/

If you click on the buttons and check your console, you will see that only the first one you click actually triggers the inner code inside the filter_function

filter_functions : {
    '.date-col' : function(e, n) { 
        console.log (e_date > date_start_parsed && e_date < date_end_parsed ? "true" : "false");
        // actual filter code is hidden
    }
}

It is however possible to use the jquery ui date pickers to change the date as many times as you want (and the code for triggering the search are the same).

I made a jsFiddle so you can check the code (I didn't added all the external resources to actually run the demo).

https://jsfiddle.net/fk7pk3y0/

If you want to download the test files, please go to http://garciaoliver.com/cosas/table/table.tar.gz

Any help is greatly appreciated.

thanks in advance, Ignacio


Solution

  • The search is actually triggering, but the only thing that is being searched is the end date.

    Actually, no offense intended, but you were making it way too complicated. I updated the demo by removing the filter_function and adding this new function:

    function searchTable() {
      var query = [],
        str = '';
      if ( date_search_start && date_search_end ) {
        str = date_search_start + ' - ' + date_search_end;
      } else if ( date_search_start && !date_search_end ) {
        str = '>=' + date_search_start;
      } else if ( !date_search_start && date_search_end ) {
        str = '<=' + date_search_end;
      }
      query[ date_col_id ] = str;
      $table.trigger('search', [ query ]);
    }
    

    So when only the start is set, it filters dates greater than that set date. If only the end date is set, it filters dates less than that set date. Otherwise, it makes the date into a range.

    Before that search will work though, you need to set a "filter-parsed" class on the header so the filter widget knows to only filter parsed values

    <th class="date-col filter-parsed">Date</th>
    

    I also had to remove the filter_defaultFilter setting. And just so you know the filter_placeholder option only applies to the filter row, so if you want to add placeholder text to the date picker inputs, you'll need to add a placeholder attribute.