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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Writing custom widgets</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>
<!-- Tablesorter: optional -->
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<script id="js">$(function() {
// add new widget called repeatHeaders
// updated v2.18.0 (works in nested tables)
// *****************************************
$.tablesorter.addWidget({
id: "repeatHeaders",
priority: 10,
options: {
rowsToSkip : 4
},
// format is called on init and when a sorting has finished
format: function(table, c, wo) {
var h = '', i, $tr, l, skip;
// cache and collect all TH headers
if (!wo.repeatHeaders) {
// "remove-me" class was added in case the table needs to be updated, the "remove-me" rows will be
// removed prior to the update to prevent including the rows in the update - see "selectorRemove" option
h = '<tr class="repeated-header remove-me">';
$.each(c.headerContent, function(i,t) {
// table.config.headerContent stores the original table HTML (as text), but it is the HTML before
// the headerTemplate option is applied to each header cell; and before the `onRender` callbacks are
// executed
h += '<th>' + t + '</th>';
});
wo.repeatHeaders = h + '</tr>';
}
// number of rows to skip
skip = wo && wo.rowsToSkip || 4;
// remove appended headers by classname
c.$tbodies.children("tr.repeated-header").remove();
// only find visible rows (may be filtered)
$tr = c.$tbodies.children('tr:visible');
l = $tr.length;
// loop all tr elements and insert a copy of the "headers"
for (i = skip; i < l; i += skip) {
// insert a copy of the table head every X rows
$tr.eq(i).before(wo.repeatHeaders);
}
},
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
// this function only applies to tablesorter v2.4+
remove: function(table, c) {
c.$tbodies.children("tr.repeated-header").remove();
}
});
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
theme: 'blue',
// apply both widgets
widgets: ['zebra', 'repeatHeaders'],
widgetOptions : {
rowsToSkip : 4
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Writing custom widgets</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<div class="tip">
Notes about the <code>addWidget</code> template:
<ul>
<li>The <code>id</code> block:
<ul>
<li>The widget id, or name, must be unique!</li>
<li>The id, or name, can contain special characters and/or spaces.</li>
<li>This setting is required.</li>
</ul>
</li>
<li>The <code>priority</code> block (added <span class="version">v2.9</span>):
<ul>
<li>Set the widget priority using any number; think of it like setting the css z-index.</li>
<li>This tells the plugin the order in which to run the widgets, lowest number priority first.</li>
<li>The default widgets have priorities set in intervals of 10 (see the <a href="index.html#Widget-options"> widget priority table</a>), so to run your custom widget before a specific widget, set your widget priority to less than that number.</li>
<li>This block is <strong>not supported in older versions</strong>!</li>
<li>This setting is optional, but if no priority is specified, it defaults to <code>10</code>.</li>
</ul>
</li>
<li>The <code>options</code> block (added <span class="version">v2.8</span>):
<ul>
<li>Include any widget options to be automatically be extended with any set widgetOptions (from <code>table.config.widgetOptions</code>).</li>
<li>As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This changed when v2.9 was released.</li>
<li>This block is <strong>not supported in older versions</strong>!</li>
<li>This block is optional.</li>
</ul>
</li>
<li>The <code>init</code> block (added v2.0.28):
<ul>
<li>This code is called only after tablesorter has initialized, but before initial sort and before <strong>any</strong> of the widgets are applied (via the <code>format</code> block); it is only run once.</li>
<li>Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before; but some of the newer widgets (post v2.9) are using this code block.</li>
<li>This block is <strong>not supported in older versions</strong>.</li>
<li>This block is optional.</li>
</ul>
</li>
<li>The <code>format</code> block (modified v2.0.23):
<ul>
<li>This block is part of the original <code>addWidget</code> template and is required.</li>
<li>In the original template, only the <code>table</code> parameter is provided. After v2.0.28, <code>config</code> and <code>widgetOptions</code> were provided as additional parameters (sorry the previous docs were incorrect).</li>
<li>The <code>initFlag</code> is correctly set in v2.8+.</li>
</ul>
</li>
<li>The <code>remove</code> block (added v2.4):
<ul>
<li>In <span class="version">v2.19.0</span> the <code>refreshing</code> parameter was added:
<ul>
<li>It is a parameter used to indicate that the <a href="index.html#refreshwidgets"><code>refreshWidgets</code></a> method was triggered.</li>
<li>When widgets are refreshed, the <code>remove</code> method is called, then the widget <code>init</code> function is immediately called to reapply the widget.</li>
<li>In this update, this parameter is used by the filter widget to retain filtered rows and prevent a "flash" of showing all rows, then returning to its previous state after applying the filter again.</li>
</ul>
</li>
<li>This code is called when either the <a href="index.html#refreshwidgets"><code>refreshWidgets</code></a> or <a href="index.html#destroy"><code>destroy</code></a> methods are called.</li>
<li>The code contained within this block must remove all additional content/elements added by the widget. Also, any rows or content that is hidden must be restored.</li>
<li>If additional rows are added to the table, make sure to include the class name within the <a href="index.html#selectorremove"><code>selectorRemove</code></a> option.</li>
<li>This block was added in v2.4, and <strong>not supported in older versions</strong>.</li>
<li>This block is optional.</li>
</ul>
</li>
</ul>
</div>
<h3>addWidget Template</h3>
<div>
<pre class="prettyprint lang-javascript">// addWidget Template
// *******************
// parameters:
// table = table object (DOM)
// config = config object (from table.config)
// widgetOptions = all widget options (from table.config.widgetOptions)
$.tablesorter.addWidget({
id: 'myWidget',
// set the priority of the widget (optional)
priority: 10,
// widget options (added v2.8) - added to table.config.widgetOptions
options: {
myWidget_option1 : 'setting1',
myWidget_option2 : 'setting2'
},
// The init function (added v2.0.28) is called only after tablesorter has
// initialized, but before initial sort & before any of the widgets are applied.
init: function(table, thisWidget, config, widgetOptions) {
// widget initialization code - this is only *RUN ONCE*
// but in this example, only the format function is called to from here
// to keep the widget backwards compatible with the original tablesorter
thisWidget.format(table, config, widgetOptions, true);
},
format: function(table, config, widgetOptions, initFlag) {
// widget code to apply to the table *AFTER EACH SORT*
// set the initFlag to true when this format is called from the init
// function above otherwise initFlag is undefined
// * see the saveSort widget for a full example *
},
remove: function(table, config, widgetOptions, refreshing) {
// do what ever needs to be done to remove stuff added by your widget
// unbind events, restore hidden content, etc.
// refreshing flag is true when the refreshWidgets method is triggered, meaning
// the widget will be removed, then immediately reapplied
}
});</pre>
</div>
<h1>Demo</h1>
<table class="tablesorter">
<thead>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
</thead>
<tfoot>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
</tfoot>
<tbody>
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
</tbody>
</table>
<h1>Javascript</h1>
<h3>Repeat Headers Widget</h3>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-pager.html">Pager plugin ››</a>
</div>
</div>
</body>
</html>
|
