tablesorter and select / dropdown boxes

Question

I'm using tablesorter (http://mottie.github.io/tablesorter/docs/index.html) and one of my tables has a dropdown select box.

With the text extraction below, I managed to make it sort by the option selected. However, this only works on the initial selection. If I change any options and re-sort the table, it still uses the old value.

How can I teach tablesorter to use the currently selected value?

    textExtraction: function(node) {
        // Check if option selected is set
        if ($(node).find('option:selected').text() != "") {
            return $(node).find('option:selected').text();
        }
        // Otherwise return text
        else return $(node).text();
    }

Mottie Mottie · Accepted Answer · 2014-05-08T12:15:29

There is a parser that comes with the plugin in the /js/parsers/ directory named parser-input-select (ref) which contains code to both parse (the textExtraction change is not required) and update the internal cache when a user changes the select.

To ensure the select parser is being used, load this parser file then set the headers option (or header class name sorter-select) as follows:

$("table").tablesorter({
    theme : "blue",
    headers: {
        0: { sorter: "select" }

    }
});

You can see this parser working in the grouping widget demo, or this jsFiddle.

tablesorter and select / dropdown boxes

1 Answers