jQuery tablesorter plugin secondary “hidden” sorting

问题

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.

回答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' }
    }
  });

});

回答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(); 
    } 
});

回答3:

Apologize for answering an old question, but 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>

回答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.

回答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>

回答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.

来源：https://stackoverflow.com/questions/9550354/jquery-tablesorter-plugin-secondary-hidden-sorting

标签

jquery-plugins

tablesorter