Jquery tablesorter addParser 支持多浏览器,多列同时排序,自定义排序

Notes about the  addParser template:

• The id block is required and must be unique.
• The is block will allow the parser to be used for autodetecting the parser
  • Most custom parsers are made for a specific set of data/column, so the is block usually just returns false telling the plugin that the parser doesn't match any columns.
  • If so desired, the function provides three parameters: s contains the text from the cell, table is the table DOM element and cell is the current cell DOM element.
  • This function must return true before the plugin will use the custom parser's format block to process the column content.
  • In version 2.7.4, the is block became optional because most parsers just return false.
• The format block is used to normalize your data and return it to the plugin for sorting
  • Within this function, modify the given text from the cell (s) or obtain parameters and/or other data from the cell (cell) then return this data to the plugin.
  • As an example, the date parser takes the date string (e.g. "12/25/2013") and converts it into a numeric value (1387951200000; ref) to make sorting and comparing dates easier.
  • Use the cellIndex if the cells within columns contain different data - see this demo for an example.
• The parsed block (added New v2.15.0)
  • This parameter is a flag used by the filter widget.
  • When true, the filter widget will only search through parsed data for matches.
  • If false (default value), the filter widget will search through the cell text for matches.
  • Currently, only the parsers for inputs, checkboxes and selects have this parameter set to true.
• The type block sets the type of sort to use:
  • Set it to either "text" or "numeric".
  • This tells the plugin the type of sorter to use.
  • Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.

Add Parser Template

$.tablesorter.addParser({
  // use a unique id
  id: 'myparser',
  is: function(s, table, cell) {
    // s is the text from the cell
    // table is the current table (as a DOM element; not jQuery object)
    // cell is the current table cell (DOM element)
    // return false if you don't want this parser to be auto detected
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    // s is the text from the cell
    // table is the current table (as a DOM element; not jQuery object)
    // cell is the current table cell (DOM element)
    // cellIndex is the current cell's column index
    // format your data for normalization
    // (i.e. do something to get and/or modify your data, then return it)
    return s;
  },
  // flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
  parsed: false,
  // set the type to either numeric or text (text uses a natural sort function
  // so it will work for everything, but numeric is faster for numbers
  type: 'numeric'
});

Demo

Name	Major	Gender	English	Japanese	Calculus	Overall grades
Student01	Languages	male	80	70	75	medium
Student02	Mathematics	male	90	88	100	good
Student03	Languages	female	85	95	80	good
Student04	Languages	male	20	50	65	bad
Student05	Mathematics	female	70	78	70	medium
Student06	Mathematics	male	44	65	60	bad

Javascript

Grades Parser Code

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
  // set a unique id
  id: 'grades',
  is: function(s, table, cell) {
    // return false so this parser is not auto detected
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    // format your data for normalization
    return s.toLowerCase()
      .replace(/good/,2)
      .replace(/medium/,1)
      .replace(/bad/,0);
  },
  // set type, either numeric or text
  type: 'numeric'
});

$(function() {
  $("table").tablesorter({
    theme: 'blue'
    // "sorter-grades" added as a class name in the HTML (new in v2.0.11)
    // or un-comment out the option below
    // ,headers: { 6: { sorter: 'grades' } }
  });

});

HTML

NOTE! Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the headers option in older versions).

<table class="tablesorter">
  <thead>
    <tr>
      <th class="sorter-text">Name</th>
      <th>Major</th>
      <th>Gender</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th class="sorter-grades">Overall grades</th> <!-- set the column parser using a class name -->
    </tr>
  </thead>
  <tbody>
    <tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>medium</td></tr>
    <tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>good</td></tr>
    <tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>good</td></tr>
    <tr><td>Student04</td><td>Languages</td><td>male</td><td>20</td><td>50</td><td>65</td><td>bad</td></tr>
    <tr><td>Student05</td><td>Mathematics</td><td>female</td><td>70</td><td>78</td><td>70</td><td>medium</td></tr>
    <tr><td>Student06</td><td>Mathematics</td><td>male</td><td>44</td><td>65</td><td>60</td><td>bad</td></tr>
  </tbody>
</table>

文章出处：http://mottie.github.io/tablesorter/docs/example-parsers.html