jQuery tablesorter plugin secondary "hidden" sorting

Question

I'm using the jQuery tablesorter plugin and I have a column that contains name of month and year like this

April, 1975
January, 2001

I would like to sort this column as if it were a date column. As I understand it, it is possible to sort the column with some other 'hidden' value, but I just can't seem to find the documentation for that feature. Any help out there?

Update

This fork http://mottie.github.com/tablesorter/docs/index.html of the tablesorter had just what I needed; the ability to store the value to sort by in an attribute, worked really great.

Antimony

Fork link broken. – Gingerich

Answer 1

I have a fork of tablesorter that allows you to write a parser that can extract data attributes from the table cell as well as assign specific textExtraction for each column.

$(function(){

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'myParser', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      // get data attributes from $(cell).attr('data-something');
      // check specific column using cellIndex
      return $(cell).attr('data-something');
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'myParser' }
    }
  });

});

Anaemia

In the latest version (2.16+), you can add data-text to any tbody cell to use its value for sorting. This data-attribute can be set using the textAttribute option. – Anaemia

Answer 2

Just using the textExtraction function. Set data-sort-value on your TDs. Defaults to normal text if it's not present.

$(".sort-table").tablesorter({
    textExtraction: function(node) {
        var attr = $(node).attr('data-sort-value');
        if (typeof attr !== 'undefined' && attr !== false) {
            return attr;
        }
        return $(node).text(); 
    } 
}); 

Taperecord

I would have made a data-attribute check built into the textExtraction function, but I found that it really slowed down the cache building process in older versions of IE. – Anaemia

Answer 3

This is now a STANDARD FEATURE of tablesorter, though it's undocumented for some reason. If you open the file https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js and look at the line # 307 you'll see it supports the "data-sort-value" attribute.

Usage:

<td data-sort-value="42">Answer to the question</td>

Kellen

Despite being in code, this did not work without explicitly defining the textExtraction function to read this value. – Ellswerth

@Ellswerth it did work for me, without any modifications. Make sure you're using the latest version of their JS code – Kellen

As Mottie mentioned above, you can also use data-text – Gloucester

This is available if you download the tablesorter version from GitHub (see commit). Sadly, the version you download from tablesorter.com is the original v2.0.5b and does not check the data-attribute. The version on GitHub has been updated, but the version number was never changed. – Anaemia

Tried both the Mottie fork and the bleeding edge release from Christian Bach. Christian Bach's version is better at automatically detecting data types and therefore needed the least amount of customization in order to migrate from older tablesorter.js versions. Mottie's fork also did not play well with Bootstrap or blank fields, which made it a non-starter for me. – Goral

That being said, I highly encourage Christian Bach to update the minified JS files on his GitHub repo. – Goral

Answer 4

It's a bit of a hack (OK, it's a total hack), but if you set the parser for the column to 'text', and pre-fix your pretty output with the string you really want to sort on within a hidden span it will sort correctly.

You can set the parser on a column with the headers option, e.g. to set the parser on the first and second columns to 'text' you would set the following:

headers: {0: {sorter: 'text'}, : {sorter: 'text'}

To do this trick with dates, you can use the ISO8601 date format which sorts lexically. JS's Date objects can generate ISO8601 date strings via the toISOString() function.

Given the CSS:

span.hidden{
    display:none;
}

A sample cell in the table would look like this:

<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>

Not the prettiest code in the world, but it does work.

Organography

same trick can be used with sorter: 'digit' - just make sure you had a separator e.g. "-" to sort formatted sizes like 1230000 - 1.23 MByte – Metzler

Answer 5

I am using

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>

Working with data-text

<td data-text="42">Answer to the question</td>

Not Working with data-sort-value

<td data-sort-value="42">Answer to the question</td>

Titanium

This is finally working for me with data-text, but for some reason my first column is not sorting – Denominational

Answer 6

You need to write your own parser. Your parser might end up looking something like:

var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
    id: 'myDate', 
    is: function(s) { return false; }, 
    format: function(s) {
        var x = s.split(', ');
        return x[1]+'-'+months[x[2]];
    },
    type: 'numeric' 
});

Not tested, but general idea.

Berseem

Thanks for responding! So there is no way that I could put a date value in some attribute on the cell like this '<td sortable-value="2001-01-01">January, 2010</td>' and make the table sorter use that? Or is it possible to use the 'textExtraction' function for just one column? Writing a parser is a little bit problematic since the months can be in other languages. Are there perhaps other plugins that do support the behaviour that I'm looking for? – Antimony

@Antimony I have a fork of tablesorter on github that will allow you to write a parser that can extract data attributes from the table cell as well as assign a specific textExtraction function for each column. – Anaemia

@fudgey Fantastic! just what I was looking for, worked great, cheers! – Antimony

@fudgey, could you please put your comment into an answer, and I'll make it the accepted answer – Antimony