Tablesorter sorting comma separated number columns incorrectly

Question

First time working with jQuery:

I'm using tablesorter to sort my table. Its acting weird with sorting numbers. Here is an example of how its sorting in descending order:

Here is an example of how its sorting in ascending order

I tried a few things like adding the class "{sorter: 'digit'}" to the element and adding left padding but not sure why its happening like this. Another table in the project works perfectly fine with the tablesorter.

My code is as follows:

 $('#timeSeriesTable' + this.chartId).tablesorter({
    widgets: ["filter", "zebra"],
    widgetOptions: {
        // if true, a filter will be added to the top of each table column;
        // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
        // if you set this to false, make sure you perform a search using the second method below
        filter_columnFilters: true,

        // Hide filter boxes by default.
        filter_hideFilters: true,

        // Set this option to false to make the searches case sensitive
        filter_ignoreCase: true,

        // if true, search column content while the user types (with a delay)
        filter_liveSearch: true,

        // Use the $.tablesorter.storage utility to save the most recent filters (default setting is false)
        filter_saveFilters: false,

        // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
        // every character while typing and should make searching large tables faster.
        filter_searchDelay: 300,

        // Applies style to columns
        zebra: ["normal-row", "alt-row"]
    },
    sortList: this.sortingList
});

Thanks for your help.

Update: I did figure out that the sorting is basically ignoring any number after comma. I saw a similar issue here and tried to add a custom parser, but it still doesnt seem to work.

Steps taken: 1. Add custom parser

$.tablesorter.addParser({
        id: "humanReadableNumber",
        is: function (s) {
          return /^[\d,]+$/.test(s);
        }, format: function (s) {
          return s.replace(/,/g, ''); 
        }, type: "numeric"
    });

Tell the header to use this parser:

$("#timeSeriesTable0").tablesorter({headers: {1: {sorter: 'humanReadableNumber'}}});

It still doesn't work. Am I missing something here?

Example of a column sorted in ascending order, this clearly shows sorting is being done for digits before the comma in each number:

Would you please share an example of the HTML being used. I think the problem is the parser is trying to deal with both the 123 and +123% from the same cell; you might need to use .split(" ") inside the parser, or use a textExtraction method. — Mottie
Hi Mottie, I think what it's doing is its clipping the numbers after first comma it encounters. I will add another screenshot of a sorted column to show the issue.. — clever_bassi

clever_bassi clever_bassi · Accepted Answer · 2018-08-02T19:16:41

Answering this in case it helps anyone else:

I ended up adding a parser to deal with comma separated numbers and then adding it as a class to the <td> element.

Custom parser code:

  $.tablesorter.addParser({
        id: "commaSeparatedNumber",
        is: function (s) {
            return /^[0-9]?[0-9,\.]*$/.test(s);
        },
        format: function (s) {
            return $.tablesorter.formatFloat(s.replace(/,/g, ''));
        },
        type: "numeric"
  });

Here is the code for adding the above parser to my <td> element:

 td.addClass("sorter-commaSeparatedNumber");

Tablesorter sorting comma separated number columns incorrectly

1 Answers