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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Writing custom parsers, advanced use</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 id="js">// add parser through the tablesorter addParser method
$(function() {
$.tablesorter.addParser({
// set a unique id
id: 'data',
is: function(s, table, cell, $cell) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
var $cell = $(cell);
// I could have used $(cell).data(), then we get back an object which contains both
// data-lastname & data-date; but I wanted to make this demo a bit more straight-forward
// and easier to understand.
// first column (zero-based index) has lastname data attribute
if (cellIndex === 0) {
// returns lastname data-attribute, or cell text (s) if it doesn't exist
return $cell.attr('data-lastname') || s;
// third column has date data attribute
} else if (cellIndex === 2) {
// return "mm-dd" that way we don't need to use "new Date()" to process it
return $cell.attr('data-date') || s;
}
// return cell text, just in case
return s;
},
// flag for filter widget (true = ALWAYS search parsed values; false = search cell text)
parsed: false,
// set type, either numeric or text
type: 'text'
});
$('table').tablesorter({
theme: 'blue',
headers: {
0 : { sorter: 'data' },
2 : { sorter: 'data' }
},
widgets: ['zebra']
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Writing custom parsers, advanced use</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
</p>
<ul>
<li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter
<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>
</ul>
</li>
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
</ul>
<h1>Demo</h1>
<div id="demo"><table>
<thead>
<tr>
<th>Name (Last)</th>
<th>Originally from...</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td data-lastname="Allen">Joe Allen</td>
<td>South Carolina</td>
<td data-date="01-15">Jan 15</td>
</tr>
<tr>
<td data-lastname="Torres">Lisa Torres</td>
<td>Maryland</td>
<td data-date="03-02">March 2nd</td> <!-- leading zeros needed to sort properly! -->
</tr>
<tr>
<td data-lastname="Franklin">Peter Louis Franklin</td>
<td>Coventry</td>
<td data-date="12-26">Boxing Day (Dec 26th)</td>
</tr>
<tr>
<td data-lastname="Jones">Maria Consuela de Los Angeles Ortiz Del Toro-Jones</td>
<td>Texas</td>
<td data-date="05-10">10 Mayo</td>
</tr>
<tr>
<td data-lastname="Bigglesworth">Mike "the Smasher" Bigglesworth</td>
<td>Rhode Island</td>
<td data-date="06-22">22nd of June</td>
</tr>
<tr>
<td data-lastname="Smith">Fredrick Smith</td>
<td>Ohio</td>
<td data-date="03-10">10th Mar</td>
</tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function) ››</a>
</div>
</div>
</body>
</html>
|
