tablesorter select multiple options from select dropdown menu and custom time filter?

Question

Is there any way to select multiple options from the select dropdown menu and display the result. Like in my fiddle I have first name as the first column and want to select and display Aaron and Clark's time. Individually its possible. But what about if two options need to be selected. How's that got to be achieved?

And, how do apply custom time filters like

Morning (between 6 to 12)

Afternoon (between 12 to 18)

Evening (between 18 to 21)

Here is what I tried, but it does not work. Infact, those options are not even shown in the select box.

http://jsfiddle.net/QJnEa/

   filter_functions : {

    1 : {
      "Morning"      : function(e, n, f, i) { return n < 12; },
      "Afternoon" : function(e, n, f, i) { return n >= 12 && n <=18; },
      "Evening"     : function(e, n, f, i) { return n > 18; }
    }

Showing only for time. Don't know how to code for multiple select.

Answer 1

In that demo, there is a class name "filter-select" in the time column which is overriding the filter_functions. All you need to do is remove that class

<th data-placeholder="Select a time block">Time</th>

then update the filter_functions to use the exact (e) value instead of the normalized value (n) which is actually a very large number (time in seconds since 1/1/2000; as defined by the time parser).

filter_functions: {

    1: {
        "Morning": function (e, n, f, i) {
            return parseInt(e, 10) < 12;
        },
        "Afternoon": function (e, n, f, i) {
            var num = parseInt(e, 10);
            return num >= 12 && num <= 18;
        },
        "Evening": function (e, n, f, i) {
            return parseInt(e, 10) > 18;
        }
    }
}

As for the second part of your question, the filter widget doesn't currently support a multiple-select element. It may in the future; but in the mean time, you might want to check out this demo (still in beta) that uses the select2 plugin external to the table.