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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Print Widget</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></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">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/widgets/widget-columnSelector.js"></script>
<script src="../js/widgets/widget-print.js"></script>
<style>
.options th.narrow {
width: 150px;
}
.button {
position: relative;
padding: 1px 6px;
display: inline-block;
cursor: pointer;
border: #000 1px solid;
border-radius: 5px;
}
.columnSelector, .hidden {
display: none;
}
#colSelect1:checked + label {
color: #307ac5;
}
#colSelect1:checked ~ #columnSelector {
display: block;
}
.columnSelector {
width: 120px;
position: absolute;
top: 30px;
padding: 10px;
background: #fff;
border: #99bfe6 1px solid;
border-radius: 5px;
}
.columnSelector label {
display: block;
text-align: left;
}
.columnSelector label:nth-child(1) {
border-bottom: #99bfe6 solid 1px;
margin-bottom: 5px;
}
.columnSelector input {
margin-right: 5px;
}
.columnSelector .disabled {
color: #ddd;
}
</style>
<script id="js">$(function() {
// v2.24.6, change popup print & close button text
// See print_now description
$.tablesorter.language.button_print = "Print";
$.tablesorter.language.button_close = "Close";
$(".tablesorter").tablesorter({
theme: 'blue',
widgets: ["zebra", "filter", "print", "columnSelector"],
widgetOptions : {
columnSelector_container : $('#columnSelector'),
columnSelector_name : 'data-name',
print_title : '', // this option > caption > table id > "table"
print_dataAttrib : 'data-name', // header attrib containing modified header name
print_rows : 'f', // (a)ll, (v)isible, (f)iltered, or custom css selector
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : '../css/theme.blue.css', // add the url of your print stylesheet
print_now : true, // Open the print dialog immediately if true
// callback executed when processing completes - default setting is null
print_callback : function(config, $table, printStyle) {
// do something to the $table (jQuery object of table wrapped in a div)
// or add to the printStyle string, then...
// print the table using the following code
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}
}
});
$('.print').click(function() {
$('.tablesorter').trigger('printTable');
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Print 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>In <span class="version">v2.24.6</span>, added <code>print_now</code> option.</li>
<li>In <span class="version updated">v2.24.1</span>, the <code>print_rows</code> option will allow using a custom css selector.</li>
<li>In <span class="version">v2.17.2</span>, the print popup window now closes with the dialog window & jQuery version requirement was changed from v1.7+ to v1.2+.</li>
<li>
In <span class="version">v2.17.0</span>, added the <code>print_callback</code> option.<br>
<br>
</li>
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version <del>1.7+</del> 1.2.6+ (<span class="version updated">v2.17.2</span>; but filter & columnSelector widgets still require jQuery 1.7+).</li>
<li>The user can print all, visible or filtered rows. And, choose to print all or selected columns (using the columnSelector widget).</li>
<li>By default, the widget is set to only print filtered rows & visible columns.</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h3>Print widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
<div class="tip">
<span class="label label-info">TIP!</span> Click on the link in the option 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="tablesorter-blue options">
<thead>
<tr><th class="narrow">Option</th><th class="narrow">Default</th><th>Description</th></tr>
</thead>
<tbody>
<tr id="print_title">
<td><a href="#" class="permalink">print_title</a></td>
<td><code>''</code></td>
<td>
This option sets the title of the popup window & ends up being printed at the top of each page.
<div class="collapsible">
<br>
If this option is blank, the print title is obtained from the table caption, then the table id, then just "table", in that order.
</div>
</td>
</tr>
<tr id="print_dataattrib">
<td><a href="#" class="permalink">print_dataAttrib</a></td>
<td><code>'data-name'</code></td>
<td>
This option contains the data-attribute name which contains the modified table header content.
<div class="collapsible">
<br>
In this demo, the column selector widget is set up to also use the "data-name" attribute so the column selector popup and print header will display this alternate text.<pre class="prettyprint lang-html"><th data-name="First">First Name</th></pre>
</div>
</td>
</tr>
<tr id="print_rows">
<td><a href="#" class="permalink">print_rows</a></td>
<td><code>'filtered'</code></td>
<td>
Set this option to designate which rows are printed (<span class="version updated">v2.24.1</span>).
<div class="collapsible">
<br>
This option has three settings (only the first letter is necessary):
<ul>
<li><code>'all'</code> or <code>'a'</code> - always print all rows (this will not work if the pager has `removeRows` set to `true`).</li>
<li><code>'filtered'</code> or <code>'f'</code> - only filtered rows are printed (even if the pager is applied).</li>
<li><code>'visible'</code> or <code>'v'</code> - only visible rows are printed (the current pager page).</li>
<li>css selector - include a css selector to apply to a row (<span class="version">v2.24.1</span>).
<ul>
<li>For example, <code>'.checked'</code>, <code>'[data-region~="west"]</code>, <code>':nth-child(2n)'</code></li>
<li>For reference, internally, this option is added immediately after (no space) a <code>'tr'</code> css selector.</li>
<li>For this option to be used as a css selector, a check of the following characters at the start of the string is done:
<ul>
<li><code>'.'</code> (class selector)</li>
<li><code>'#'</code> (id selector)</li>
<li><code>':'</code> (pseudo selector)</li>
<li><code>'['</code> (start of an attribute selector)</li>
</ul>
</li>
</ul>
</li>
</ul>
<span class="label label-info">Note</span> only rows contained within the table are printed; i.e. if ajax is being used to populate the table, only the currently loaded rows will print.
</div>
</td>
</tr>
<tr id="print_columns">
<td><a href="#" class="permalink">print_columns</a></td>
<td><code>'selected'</code></td>
<td>
Set this option to designate which columns are printed.
<div class="collapsible">
<br>
This option has three settings (only the first letter is necessary):
<ul>
<li><code>'all'</code> or <code>'a'</code> - always print all columns; including any intentionally hidden table cells.</li>
<li><code>'selected'</code> or <code>'s'</code> - only selected (visible) columns are printed (as set by the columnSelector widget).</li>
<li><code>'visible'</code> or <code>'v'</code> - set this option to print the table columns as is... no extra css is added to force table cells to be visible.</li>
</ul>
</div>
</td>
</tr>
<tr id="print_extracss">
<td><a href="#" class="permalink">print_extraCSS</a></td>
<td><code>''</code></td>
<td>
If you have any custom css to add to the print popup window, include it in this option
<div class="collapsible">
<br>
Use this option as follows:
<pre class="prettyprint lang-js">print_extraCSS : ".caption { display: none; }"</pre>
</div>
</td>
</tr>
<tr id="print_stylesheet">
<td><a href="#" class="permalink">print_styleSheet</a></td>
<td><code>''</code></td>
<td>
If you have stylesheet you want to add to the print popup window, include the url in this option
<div class="collapsible">
<br>
Use this option as follows:
<pre class="prettyprint lang-js">print_styleSheet : "../css/theme.blue.css"</pre>
</div>
</td>
</tr>
<tr id="print_now">
<td><a href="#" class="permalink">print_now</a></td>
<td><code>true</code></td>
<td>
If <code>true</code>, the browser print dialog will open immediately (<span class="version">v2.24.6</span>).
<div class="collapsible">
<br>
If <code>false</code>, the popup window will open with two additional controls:
<ul>
<li>A "Print" button - open the print dialog inside of the popup window.</li>
<li>A "Close" button - close the popup window.</li>
</ul>
To change the text of the buttons, use the following settings:
<pre class="prettyprint lang-js">$.tablesorter.language.button_print = "Imprimer";
$.tablesorter.language.button_close = "Ferme";</pre>
The above code can be added before or after initializing tablesorter. It doesn't matter because the values are only accessed when the user initiates a print.
</div>
</td>
</tr>
<tr id="print_callback">
<td><a href="#" class="permalink">print_callback</a></td>
<td><code>null</code></td>
<td>
This callback allows further processing of the table & style (<span class="version">v2.17.0</span>)
<div class="collapsible">
<br>
When this callback is executed, three parameters are provided:
<ul>
<li><code>config</code> - The table config settings.</li>
<li><code>$table</code> - The table wrapped in a div, as a jQuery object. It contains all the rows & cells of the original table, but the content of cells will be replaced by the contents of the associated <code>data-name</code> attribute.</li>
<li><code>printStyle</code> - This is the print style associated with the table. It contains styles to show or hide selected rows & columns, including the columnSelector style to hide specific columns.</li>
</ul>
When any processing within this callback is complete, you must manually call the print function to continue printing as follows:
<pre class="prettyprint lang-js">// print callback example
print_callback : function( config, $table, printStyle ) {
// do something to the table or printStyle string
// use the following code to continue printing
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<h3><a href="#">Method</a></h3>
<div>
<ul>
<li>To make the print widget work programmatically, trigger a "printTable" event.
<pre class="prettyprint lang-js">$('.print').click(function() {
$('.tablesorter').trigger('printTable');
});</pre>
</li>
</ul>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><div class="print button">Print</div>
<div class="columnSelectorWrapper button">
<input id="colSelect1" type="checkbox" class="hidden">
<label class="columnSelectorButton" for="colSelect1">Column</label>
<div id="columnSelector" class="columnSelector">
<!-- this div is where the column selector is added -->
</div>
</div>
<table class="tablesorter">
<thead>
<tr>
<th class="filter-select" data-placeholder="Select a name" data-priority="2" data-name="First">First Name</th>
<th data-placeholder="Exact matches only" data-priority="critical">Last Name</th>
<th data-placeholder="Choose a city" data-priority="4">City</th>
<th data-placeholder="Enter an age" data-priority="3">Age</th>
<th data-placeholder="Select a filter">Total</th>
<th class="filter-select">Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>35</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
<tr><td>Aaron</td><td>Johnson</td><td>Yuma</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
<tr><td>Clark</td><td>Henry Jr</td><td>Tampa</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
<tr><td>Denni</td><td>Henry</td><td>New York</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>Boston</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 Sr</td><td>Los Angeles</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<tr><td>Peter</td><td>Kent Esq</td><td>Seattle</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
<tr><td>Peter</td><td>Johns</td><td>Milwaukee</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
<tr><td>Aaron</td><td>Evan</td><td>Chicago</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
<tr><td>Bruce</td><td>Evans</td><td>Upland</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<tr><td>Clark</td><td>McMasters</td><td>Pheonix</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
<tr><td>Dennis</td><td>Masters</td><td>Indianapolis</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
<tr><td>John</td><td>Hood</td><td>Fort Worth</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</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>
</body>
</html>
|
