Notes about the
addWidget template:
- The
idblock is required and must be unique. - The
isblock 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
isblock usually just returns false telling the plugin that the parser doesn't match any columns. - If so desired, the function provides three parameters:
scontains the text from the cell,tableis the table DOM element andcellis the current cell DOM element. - This function must
return truebefore the plugin will use the custom parser's format block to process the column content. - In version 2.7.4, the
isblock became optional because most parsers just return false.
- Most custom parsers are made for a specific set of data/column, so the
- The
formatblock 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
cellIndexif the cells within columns contain different data - see this demo for an example.
- Within this function, modify the given text from the cell (
- The
typeblock 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.
- Set it to either
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;
},
// 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
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).