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

Student01Languagesmale807075mediumStudent02Mathematicsmale9088100goodStudent03Languagesfemale859580goodStudent04Languagesmale205065badStudent05Mathematicsfemale707870mediumStudent06Mathematicsmale446560bad

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