CODEWITHSUNDEEP
javascriptjquerysortingtablesorter
DecafJava
DecafJava

Reputation: 479

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

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!!

Upvotes: 7

Views: 6118

Answers (4)

vortextangent
vortextangent

Reputation: 571

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);
});

Upvotes: 9

Hobo
Hobo

Reputation: 7611

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.

Upvotes: 3

Teetrinker
Teetrinker

Reputation: 850

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

Upvotes: 3

Babak Naffas
Babak Naffas

Reputation: 12561

For the non-standard data (anything other than simple text or numerics, you have to write a parser and add it via their API. See here: http://tablesorter.com/docs/example-parsers.html

I had to do this for table cells that had a numeric value (a percentage) and an image in the same cell. You could try this for simple "$1.58" to be sorted at the number 1.58

// add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'money', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        var str = s.replace('$', '').replace(',','') ;
        return parseFloat(str);
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});

Upvotes: 1

Related Questions