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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - headerTitles widget</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">
<link href="css/tipsy.css" rel="stylesheet">
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery.tipsy.min.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- Tablesorter: optional -->
<script src="../js/widgets/widget-headerTitles.js"></script>
<script id="js">$(function() {
var updateTooltips = function($cell, txt) {
// dynamically update tipsy
if ($cell.is(':hover')) {
$cell
.attr({ title : txt, 'original-title': txt })
// hide, then show the tooltip to force updating & realignment
.tipsy('hide')
.tipsy('show');
}
return txt;
};
$("#table1").tablesorter({
theme : 'blue',
sortList: [[0,0]],
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles'],
widgetOptions: {
headerTitle_useAria : true,
// add tooltip class
headerTitle_tooltip : 'tooltip',
// manipulate the title as desired
headerTitle_callback : updateTooltips
}
});
// This table is showing all of the headerTitle widget options
$("#table2").tablesorter({
theme : 'blue',
sortList: [[0,0]],
// third click resets the sort
sortReset: true,
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles'],
widgetOptions: {
// headerTitle_prefix : 'Sort: ', // option has been deprecated
// use aria-label text
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
headerTitle_useAria : false,
// add tooltip class
headerTitle_tooltip : 'tooltip',
// custom titles [ "ascending", "descending", "unsorted" ]
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],
// title display; {prefix} adds above prefix
// {type} adds the current sort order from above (text or numeric)
// {next} adds the next sort direction using the sort order above
headerTitle_output_sorted : '{current}; activate to {next}',
headerTitle_output_unsorted : '{current}; activate to {next}',
headerTitle_output_nosort : 'No sort available',
// use this type to override the parser detection result
// e.g. use for numerically parsed columns (e.g. dates), but you
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
// use '' (empty string) to use the default
headerTitle_type : ['', '', '', '', '', 'text'],
// manipulate the title as desired
headerTitle_callback : updateTooltips
}
});
// using defaults, no tooltips
$("#table3").tablesorter({
theme : 'blue',
sortList: [[0,0]],
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles']
});
// add tooltip
$('.tooltip').tipsy({ gravity: 's' });
// switch aria mode
var $state = $('#usearia'),
$table1 = $('#table1'),
// first table only
wo = $table1[0].config.widgetOptions;
$('button').on('click', function() {
wo.headerTitle_useAria = !wo.headerTitle_useAria;
// show current state in demo
$state.text( wo.headerTitle_useAria );
// force headerTitles widget to update
$table1.trigger('refreshHeaderTitle');
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>headerTitles Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p></p>
<br>
<div class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">2.15.7</span>,
<ul>
<li>Sorry for all of these breaking changes, I should have left this widget in beta.</li>
<li>The <code>headerTitle_prefix</code>, <code>headerTitle_text</code>, <code>headerTitle_numeric</code> options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.</li>
<li>Added <code>headerTitle_useAria</code>, <code>headerTitle_tooltip</code>, <code>headerTitle_output_sorted</code>, <code>headerTitle_output_unsorted</code>, <code>headerTitle_output_nosort</code>, <code>headerTitle_cur_text</code>, <code>headerTitle_cur_numeric</code>, <code>headerTitle_nxt_text</code>, <code>headerTitle_nxt_numeric</code>, <code>headerTitle_type</code> & <code>headerTitle_callback</code> options. See the options section below for more details.</li>
<li>Added <code>"refreshHeaderTitle"</code> method to force the widget to update.</li>
</ul>
</li>
<li>This widget adds a title to the table headers when they are sorted.</li>
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
<li>The examples uses the <a href="http://onehackoranother.com/projects/jquery/tipsy/">tipsy jQuery plugin </a></li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<table class="tablesorter-blue">
<colgroup>
<col style="width:50px;">
<col style="width:120px;">
<col>
</colgroup>
<thead>
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>headerTitle_useAria</td>
<td><code>false</code></td>
<td>
When <code>true</code>, the headers titles are extracted from the <code>aria-label</code>. The text in that label is built from the <a href="http://mottie.github.io/tablesorter/docs/#variable-language"><code>$.tablesorter.language</code> option</a>.
</td>
</tr>
<tr>
<td>headerTitle_tooltip</td>
<td><code>""</code></td>
<td>
Add a (tooltip) class name to the header, yeah you could have used the <a href="http://mottie.github.io/tablesorter/docs/#cssheader"><code>cssHeader</code> option</a> to do the same thing, but this option allows adding classes using an array.
<pre class="prettyprint lang-js">headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']</pre>
</td>
</tr>
<tr>
<td>
headerTitle_cur_text<br>
headerTitle_cur_numeric
</td>
<td>(see description)</td>
<td>
When any of the header title output options use the <code>{current}</code> tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.<br>
<br>
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:
<pre class="prettyprint lang-js">headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]</pre>
</td>
</tr>
<tr>
<td>
headerTitle_nxt_text<br>
headerTitle_nxt_numeric
</td>
<td>(see description)</td>
<td>
When any of the header title output options use the <code>{next}</code> tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.<br>
<br>
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:
<pre class="prettyprint lang-js">headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]</pre>
</td>
</tr>
<tr>
<td>
headerTitle_output_sorted<br>
headerTitle_output_unsorted<br>
headerTitle_output_nosort
</td>
<td>(see description)</td>
<td>
Set the output string for each sort condition: sorted, unsorted or sorting disabled.<br>
<br>
Each of these option strings can include a <code>{name}</code>, <code>{current}</code> and <code>{next}</code> tag.
<ul>
<li>The <code>{name}</code> tag is replaced by the header text.</li>
<li>The <code>{current}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_cur_text</code> or <code>headerTitle_cur_numeric</code> option.</li>
<li>The <code>{next}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_nxt_text</code> or <code>headerTitle_nxt_numeric</code> option.</li>
</ul>
Defaults:
<pre class="prettyprint lang-js">headerTitle_output_sorted : 'current{current}; activate to {next}',
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
headerTitle_output_nosort : 'No sort available'</pre>
Note: the reason "activate" is used instead of "click" is because the user can also <kbd>Tab</kbd> to the header cell and press <kbd>Enter</kbd> to initiate a sort.
</td>
</tr>
<tr>
<td>headerTitle_type</td>
<td><code>[]</code></td>
<td>Each column type is determined by the parser <code>type</code> value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.<br>
<br>
As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type.
<pre class="prettyprint lang-js">headerTitle_type : ['', '', '', '', '', 'text']</pre>
</td>
</tr>
<tr>
<td>headerTitle_callback</td>
<td><code>null</code></td>
<td>
This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters <code>$cell</code> (the header cell as a jQuery object), and the processed text (<code>txt</code>). The function <strong>must</strong> return the text!
<pre class="prettyprint lang-js">headerTitle_callback : function($cell, txt) {
return txt;
}</pre>In this demo, you will notice that this function is used to dynamically update the tooltip.
</td>
</tr>
</tbody>
</table>
</div>
<h3><a href="#">Method</a></h3>
<div>
<h3>Force headerTitle widget update</h3>
If you need to programmically force the header title to update, trigger a <code>refreshHeaderTitle</code> event on the table:
<pre class="prettyprint lang-js">$('table').trigger('refreshHeaderTitle');</pre>
In this demo, this method is used when switching between the default header title and aria-label text.
</div>
</div>
<h1>Demo</h1>
<div id="demo">
<h3>Tooltip plugin using togglable aria-label text</h3>
<button type="button">use aria-label</button>: <span id="usearia" class="bright">true</span>
<table id="table1">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
</tbody>
</table>
<h3>Tooltip plugin with alternative titles</h3>
<table id="table2">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
</tbody>
</table>
<h3>No Tooltip Plugin</h3>
<table id="table3">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
</tbody>
</table>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
</div>
</body>
</html>
|
