Allowing Tablesorter filter widget filter_functions to target an external dropdown

Question

I am using version 2.20.1 of the forked version of the library and have the filter widget installed. We dont really want to use the inline filtering boxes so we have set filter_columnFilters: false and filter_external: '.search'. This is great because it allows our search box to be separate from the table.

We would also like to have a dropdown filter external to the table. I have two ideas how to implement this but need to be pointed in the right direction as I have yet to make either work.

First idea would be to use the built-in filter_functions:

filter_functions:
   {
      "#dateSelection": 
      {
         "30 Days": function(e, n, f, i, $r) { return ...; },
         "6 Months": function(e, n, f, i, $r) { return ...; },
         "All Time": function(e, n, f, i, $r) { return ...; }
      }
   }

However it appears that the jquery selector only targets tr tags within the table.

My second idea was to call a custom filter function. Something like $("table").tablesorter.filter() but I dont see any function to do manual filtering.

Any ideas on how I can achieve this? Is there a third option I havent thought of?

Answer 1

The filter_function selector needs to match the column header class.

In this example, we set the header class to "english"

<th class="english">English</th>

Add an external select (include an option value attribute because IE won't work otherwise); a data-column attribute is also required.

English Scores: <select class="search" data-column="3">
    <option value="">All</option>
    <option value="less-than-50">&lt; 50</option>
    <option value="between 50 & 90">50 to 90</option>
    <option value="greater than 90">&gt; 90</option>
</select>

Then set up the filter_functions to target the header class name, and include keys that match the option values:

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_columnFilters: false,
            filter_external: '.search',
            filter_functions : {
                '.english' : {
                    'less-than-50' : function(e, n) { return n < 50; },
                    'between 50 & 90' : function(e, n) { return n >= 50 && n <= 90; },
                    'greater than 90' : function(e, n) { return n > 90; }
                }
            }
        }
    });
});