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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Formatter Widget</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<script>
// tweak "Added" column to keep recent dates
$(function() {
var d, t,
tweaks = [ 9e5, 8e8, 2e7, 0, 6e10, 1e11 ],
$t = $('#demo tbody'),
date = new Date().getTime();
$t.find('tr td:nth-child(4)').each(function(i) {
d = new Date( date - tweaks[i] );
t = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear() + ' ' +
d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
$(this).html( t );
});
});
</script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
<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">
<link rel="stylesheet" href="../css/theme.ice.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script src="../js/widgets/widget-formatter.js"></script>
<style id="css">/* demo styling */
#table strong {
color: #a00;
}</style>
<script id="js">$(function() {
$('.tablesorter').tablesorter({
theme: 'blue',
widgets: ['formatter', 'filter'],
widgetOptions: {
filter_matchType : { 'input': 'match', 'select': 'exact' },
formatter_column: {
'.emphasize' : function( text, data ) {
return '<strong>' + text + '</strong>';
},
'.supercar' : function( text, data ) {
if ( text === '' ) { return ''; }
// replace table cell with a link
return '<a href="https://www.google.com/search?tbm=isch&q=' + text.replace(/\s/g, '+') + '">' + text + '</a>';
},
'.date' : function( text, data ) {
var date = new Date( text );
if ( date instanceof Date && isFinite( date ) ) {
data.$cell.attr( data.config.textAttribute, text );
return '<em>' + prettyDate( date ) + '</em>';
}
return text;
},
'.duckify' : function( text, data ) {
if ( text === '' ) { return ''; }
// add text to data-attribute; this overrides the parser
data.$cell.attr( data.config.textAttribute, text );
// replace table cell with a link
return '<a href="https://duckduckgo.com/?ia=images&q=' + text + '">Search The Duck</a>';
},
'.blue' : function( text, data ) {
return '<span class="blue">' + text + '</span>';
}
}
}
});
});
/*
* JavaScript Pretty Date (MODIFIED)
* Copyright (c) 2011 John Resig (ejohn.org)
* Licensed under the MIT and GPL licenses.
*/
function prettyDate(date) {
var diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
if ( isNaN(day_diff) || day_diff < 0 ) { return ''; }
return day_diff == 0 && (
diff < 60 && 'just now' ||
diff < 120 && '1 minute ago' ||
diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
diff < 7200 && '1 hour ago' ||
diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
day_diff == 1 && 'Yesterday' ||
day_diff < 7 && day_diff + ' days ago' ||
day_diff < 61 && Math.ceil( day_diff / 7 ) + ' weeks ago' ||
day_diff < 730 && Math.floor( day_diff / 30 ) + ' months ago' ||
Math.floor( day_diff / 365 ) + ' years ago';
}</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Formatter 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 id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.</li>
<li>It allows you to add custom formatting to table columns.</li>
<li>You have the option of storing the original cell text within the table cell data-attribute to maintain the sort order.</li>
<li>This widget is not optimized for large tables; but it only runs on initialization and after any updates have occurred.</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h4>Formatter widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
<table class="options tablesorter-blue">
<thead>
<tr><th class="option">Option</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="formatter-column">
<td><a href="#" class="permalink">formatter_column</a></td>
<td>Assign a formatting function by column index or column header class name; these functions only apply to the <code>tbody</code> cells.
<div class="collapsible">
<br>
Set up the formatter to return the HTML for the table cell.
<pre class="prettyprint lang-js">formatter_column: {
'.emphasize' : function( text, data ) {
return '<strong>' + text + '</strong>';
}
}</pre>
If the text in the cell is to be changed, but you don't want the sort to be effected, then add the original text into the data-attribute as follows:
<pre class="prettyprint lang-js">formatter_column: {
'.makesearch' : function( text, data ) {
// don't make a link if there is no text in the cell
if ( text === '' ) { return ''; }
// add text to data-attribute; this overrides the parser
data.$cell.attr( data.config.textAttribute, text );
// then replace text with a link
return '<a href="http://mysite.com?query=' + encodeURIComponent(text) + '">Get Definition</a>';
}
}</pre>
The <code>data</code> parameter provided to the <code>formatter_column</code> function contains the following information:
<pre class="prettyprint lang-js">data = {
config : table.config,
wo : table.config.widgetOptions,
$header : $('th'), // the header cell of the current column
$row : $('tr'), // jQuery object of the row currently being processed
$cell : $('td'), // jQuery object of the cell currently being processed
text : 'Batman', // the text from the current cell
columnIndex : 0 // the column index of the current cell
}</pre>
</div>
</td>
</tr>
<tr id="formatter-event">
<td><a href="#" class="permalink">formatter_event</a></td>
<td>The formatter will update when this event is triggered on the table.
<div class="collapsible">
<br>
The default setting is <code>'applyFormatter'</code>
<p></p>
The formatter is set up to run again after an "updateComplete" or "pagerComplete" event fires; this option allows setting a custom-named event to force the formatter to update in addition to the complete events.
<p></p>
<span class="label warning">* NOTE *</span> So, if the text in the cell gets modified by the formatter, make sure your code saves the original text into the data-attribute or it will get lost.
<p></p>
Force an update as follows:
<pre class="prettyprint lang-js">$('table').trigger('applyFormatter');</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><table id="table" class="tablesorter">
<thead>
<tr>
<th class="emphasize filter-exact">Super Hero</th>
<th class="supercar">Super Car</th>
<th class="duckify filter-select">Image Links</th>
<th class="date">Added</th>
</tr>
</thead>
<tbody>
<!-- Added column dates are dynamically updated for this demo -->
<tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>1/1/2015</td></tr>
<tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>12/22/2014</td></tr>
<tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/10/2010</td></tr>
<tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>5/5/2012</td></tr>
<tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>1/1/2005</td></tr>
<tr><td>Wonder Woman</td><td>McLaren F1</td><td>Tiger</td><td>3/1/2013</td></tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>
|
