# tablesorter

## Writing custom parsers

### Flexible client-side table sorting

Back to documentation
Notes about the `addWidget` 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 `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;
      },
      // 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).

Next up: Writing custom parsers, advanced ››