Tablesorter : filter_functions and sort by value

Question

I'm using latest version (2.28.8) of tablesorter with filter widget and would like to :

1. sort by percentage list by ASC/DESC order
2. define a custom filter to list some predefined range
3. order my custom filter to be ascending one (<5% then 10%-20%,...)

I'm definining a like this : <td data-text="5-10%">10</td> to have range filters.

Here is a demo:

• Min Column has numbers defined in data-text to define the order
• Max column doesn't have.

=> Can we do this more properly? (goal #3 of list above)

Observed : The filter works fine. But the click ASC/DESC is wrong. Note that the descending order is correct for Max column but not the ascending order.

Expected : How can I achive my 3 goals?

I saw this example but as I have plenty table with this plugin, I should fine a way to apply the filter_functions for a single table having already the tablesorter initialized.

Tablesorter is called :

$(".tablesorter-scroll").tablesorter({
    widthFixed : false,
    showProcessing: true,

    widgets: ['filter', 'columnSelector', 'scroller'],
    ...
});

Hope I was clear enough, don't hesitate to ask. Thanks for your time.

Answer 1

Check out the filter_functions demo. You can define a set of filter functions to apply to the select. Additionally, you can add a class to the header to target instead of define a function for each column:

HTML

<table id="task">
  <thead>
    <tr>
      <th class='ranges filter-onlyAvail'>Min [%]</th>
      <th class='ranges filter-onlyAvail'>Max [%]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5 %</td>
      <td>10 %</td>
    </tr>
    <tr>
      <td>50 %</td>
      <td>100 %</td>
    </tr>
    <tr>
      <td>0 %</td>
      <td>4 %</td>
    </tr>
    <tr>
      <td>10 %</td>
      <td>15 %</td>
    </tr>
    <tr>
      <td>25 %</td>
      <td>50 %</td>
    </tr>
  </tbody>
</table>

Script

$(function() {
  $("#task").tablesorter({
    widgets: ["zebra", "filter"],
    widgetOptions: {
      filter_functions: {
        '.ranges' : {
          '<= 5%': function(e, n) { return n <= 5; },
          '10% - 20%': function(e, n) { return n >= 10 && n <= 20; },
          '20% - 50%': function(e, n) { return n >= 20 && n <= 50; },
          '>= 50%': function(e, n) { return n >= 50; }
        }
      }
    }
  });
});