1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Writing custom parsers</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script id="js">// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'grades',
is: function(s, table, cell, $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' } }
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Writing custom parsers</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
Notes about the <code>addParser</code> template:
</p>
<ul>
<li>The <code>id</code> block is required and must be unique.</li>
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
<ul>
<li>Most custom parsers are made for a specific set of data/column, so the <code>is</code> block usually just returns false telling the plugin that the parser doesn't match any columns.</li>
<li>If so desired, the function provides four parameters: <code>s</code> contains the text from the cell, <code>table</code> is the table DOM element, <code>cell</code> is the current cell DOM element and <code>$cell</code> is the current cell as a jQuery object (added <span class="version">v2.18.0</span>).</li>
<li>This function must <code>return true</code> before the plugin will use the custom parser's format block to process the column content.</li>
<li>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
</ul>
</li>
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
<ul>
<li>Within this function, modify the given text from the cell (<code>s</code>) or obtain parameters and/or other data from the cell (<code>cell</code>) then return this data to the plugin.</li>
<li>As an example, the date parser takes the date string (e.g. <code>"12/25/2013"</code>) and converts it into a numeric value (<code>1387951200000</code>; <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime">ref</a>) to make sorting and comparing dates easier.</li>
<li>Use the <code>cellIndex</code> if the cells within columns contain different data - see this <a href="example-parsers-advanced.html">demo</a> for an example.</li>
</ul>
</li>
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
<ul>
<li>This parameter is a flag used by the filter widget.</li>
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
</ul>
</li>
<li>The <code>type</code> block sets the type of sort to use:
<ul>
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
<li>This tells the plugin the type of sorter to use.</li>
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
</ul>
</li>
</ul>
<h3>Add Parser Template</h3>
<pre class="prettyprint lang-javascript">$.tablesorter.addParser({
// use a unique id
id: 'myparser',
is: function(s, table, cell, $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)
// $cell is the current table cell (jQuery object; added v2.18.0)
// 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'
});</pre>
<h1>Demo</h1>
<div id="demo"><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></div>
<h1>Javascript</h1>
<h3>Grades Parser Code</h3>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>HTML</h1>
<p class="tip">
<em>NOTE!</em> Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the <code>headers</code> option in older versions).
</p>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-parsers-advanced.html">Writing custom parsers, advanced ››</a>
</div>
</div>
</body>
</html>
|
