Using jQuery TableSorter to Sort Columns Containing Drop-down (SELECT) Tags and Dollar Signs ($)

Question

I am using the fabulous jQuery TableSorter plugin to automatically add sorting functionality to the columns of a table (simply by clicking on each column's header). This works flawlessly for all columns except a couple of them.

1) One of the column's cells contain dollar signs in the front (such as: $20, $10, $5). The sorting does not work properly; it sorts alphabetically (and since all cell contents start with a $, they all get incorrectly bundled together). What code would force the sorter to start from the second character, thus ignoring the dollar signs?

2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas?

If you can at least point me to the right direction and give me an idea about how to customize the sorting in each of the two scenarios, I would greatly appreciate it.

Thanks in advance!!

Answer 1

This worked for me. may need some tweaking if no option is selected...

$(document).ready(function(){
    // Sortable tables
    $('table').tablesorter ({
        cancelSelection: true,
        sortList: [[0,0]],
        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();
        }
    });
});

This library uses a cache in newer versions. Updates to a dropdown require the table sorter's cache to be refreshed. If the cache is not refreshed then the column will sort by the dropdown's original selection and not its current one.

// hook into the select element's onchange event
$("td > select").change(function() {
        const config = $("table")[0].config;
        //refresh the cache so the newly selected element is used to sort with
        $.tablesorter.updateCache(config);
});

Answer 2

2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas?

I just tried to achieve that and it's not possible in a straightforward way. The string that the parser function gets as a parameter (..format: function(s) {..) is already stripped from tags. So it's not possible to determine which value is selected. For that, the tablesorter would have to be modified.

What I did now was to add a hidden option up front with the selected value in it. It's a workaround. But like that it's not even necessary to write your own parser and tablesorter sorts correctly.

<option style="display:none">B</option>
<option value="A">A</option>
<option value="B" selected="selected">B</option>
<option value="C">C</option>
...
<option style="display:none">A</option>
<option value="A"  selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>

The strings after which tablesorter sorts now are:

• BABC
• AABC

Answer 3

In case it helps someone trying to do this in future, I found a solution to:

2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to
alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas?

using a fork of tablesorter by Mottie. It allows for custom text extraction functions at the column level (see Mottie's documentation). For the column I wanted to sort (the first in this case, hence the 0 index), I initialized with:

textExtraction: {
    0: function(node) {
        return $(node).find('option:selected').text();
    }
}

I couldn't see an elegant way to get it to work with the original, sadly.