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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - jQuery UITheme Widget (jQuery UI)</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>
<!-- jQuery UI theme switcher: https://github.com/pontikis/jui_theme_switch/ -->
<style>
.switcher_container { padding: 5px; }
.switcher_list { padding: 2px; }
.switcher_label { margin-right: 5px; }
</style>
<script src="js/jquery.jui_theme_switch.min.js"></script>
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
<link id="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="../css/theme.jui.css" rel="stylesheet">
<link href="../css/theme.grey.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script src="../js/widgets/widget-uitheme.js"></script>
<!-- Tablesorter: optional -->
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
<script id="js">$(function() {
// Extend the themes to change any of the default class names
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons at
// http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
caption : 'ui-widget-content',
// header class names
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
sortNone : '',
sortAsc : '',
sortDesc : '',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
// icon class names
icons : 'ui-icon', // icon class added to the <i> in the header
iconSortNone : 'ui-icon-carat-2-n-s ui-icon-caret-2-n-s', // class name added to icon when column is not sorted
iconSortAsc : 'ui-icon-carat-1-n ui-icon-caret-1-n', // class name added to icon when column has ascending sort
iconSortDesc : 'ui-icon-carat-1-s ui-icon-caret-1-s', // class name added to icon when column has descending sort
filterRow : '',
footerRow : '',
footerCells : '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
});
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
theme : 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme', 'filter', 'zebra'],
widgetOptions : {
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra : ["even", "odd"],
// set the uitheme widget to use the jQuery UI theme class names
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
// uitheme : 'jui'
}
});
});</script>
<script>
$(function() {
$('#switcher').jui_theme_switch({
stylesheet_link_id : 'ui-theme',
default_theme : 'cupertino',
datasource_url : 'assets/theme_switcher.json'
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>jQuery UITheme Widget (jQuery UI)</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.27.0</span>, the icon class name changes used by jQuery 1.12.0 have been included. Icon class names were renamed from using "carat" to "caret"; this widget now includes both for backwards compatibility.</li>
<li>In <span class="version">v2.19.0</span>, this widget allows dynamic changing of themes; including switching from jQuery UI or Bootstrap to any other theme. To change a theme, do the following:
<pre class="prettyprint lang-js">var $table = $('table');
$table[0].config.theme = 'grey';
$table.trigger('applyWidgets');</pre>
To see this work, check out the <a href="example-widget-scroller.html">scroller widget demo</a>.
</li>
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code (v2.7).</li>
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
<ul>
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-option-theme-bootstrap-v3.html">bootstrap demo</a> for another example.</li>
</ul>
</li>
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
</ul>
<h1>Demo</h1>
<br>
jQuery UI Theme:
<div id="switcher"></div>
<br>
<div id="demo"><table class="tablesorter">
<caption>Some interesting caption</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</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>$153.19</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>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html"><!-- ui theme stylesheet - contents shown below -->
<link rel="stylesheet" href="../css/theme.jui.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<!-- load jQuery first -->
<script src="js/jquery.min.js"></script>
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
</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-theme-bootstrap-v3.html">UITheme widget - Bootstrap theme ››</a><br>
Second time around: <a href="example-option-render-header.html">Modifying the Header during rendering ››</a>
</div>
</div>
</body>
</html>
|
