Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2629 vikas 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3
	<head>
4
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
5
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
6
 
7
		<title>TableTools example</title>
8
		<style type="text/css" title="currentStyle">
9
			@import "../../media/css/demo_page.css";
10
			@import "../../media/css/demo_table.css";
11
			@import "media/css/TableTools.css";
12
		</style>
13
		<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
14
		<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
15
		<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
16
		<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
17
		<script type="text/javascript" charset="utf-8">
18
			$(document).ready( function () {
19
				$('#example').dataTable( {
20
					"sDom": 'T<"clear">lfrtip',
21
					"oTableTools": {
22
						"sRowSelect": "multi",
23
						"aButtons": [ "select_all", "select_none" ]
24
					}
25
				} );
26
			} );
27
		</script>
28
	</head>
29
	<body id="dt_example">
30
		<div id="container">
31
			<div class="full_width big">
32
				TableTools example - multi-row select
33
			</div>
34
 
35
			<h1>Preamble</h1>
36
			<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows in the table. Row selection is turned off by default in TableTools, but can be enabled using the <i>sRowSelect</i> parameter, set to either 'multi' or 'single'. When set the end user can select rows by simply clicking on them. TableTools provides <a href="http://datatables.net/extras/tabletools/api">a set of API methods</a> and <a href="http://datatables.net/extras/tabletools/initialisation">callbacks</a> for controlling and monitoring the row selection in TableTools. There are also a number of <a href="http://datatables.net/extras/tabletools/buttons">pre-defined buttons</a> to provide functions such as select-all and select-none, as shown in this example.</p>
37
 
38
 
39
			<h1>Live example</h1>
40
			<div id="demo">
41
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
42
	<thead>
43
		<tr>
44
			<th>Rendering engine</th>
45
			<th>Browser</th>
46
			<th>Platform(s)</th>
47
			<th>Engine version</th>
48
			<th>CSS grade</th>
49
		</tr>
50
	</thead>
51
	<tfoot>
52
		<tr>
53
			<th>Rendering engine</th>
54
			<th>Browser</th>
55
			<th>Platform(s)</th>
56
			<th>Engine version</th>
57
			<th>CSS grade</th>
58
		</tr>
59
	</tfoot>
60
	<tbody>
61
		<tr class="odd_gradeX">
62
			<td>Trident</td>
63
			<td>Internet Explorer 4.0</td>
64
			<td>Win 95+ (Entity: &amp;)</td>
65
			<td class="center">4</td>
66
			<td class="center">X</td>
67
		</tr>
68
		<tr class="even_gradeC">
69
			<td>Trident</td>
70
			<td>Internet Explorer 5.0</td>
71
			<td>Win 95+</td>
72
			<td class="center">5</td>
73
			<td class="center">C</td>
74
		</tr>
75
		<tr class="odd_gradeA">
76
			<td>Trident</td>
77
			<td>Internet Explorer 5.5</td>
78
			<td>Win 95+</td>
79
			<td class="center">5.5</td>
80
			<td class="center">A</td>
81
		</tr>
82
		<tr class="even_gradeA">
83
			<td>Trident</td>
84
			<td>Internet Explorer 6</td>
85
			<td>Win 98+</td>
86
			<td class="center">6</td>
87
			<td class="center">A</td>
88
		</tr>
89
		<tr class="odd_gradeA">
90
			<td>Trident</td>
91
			<td>Internet Explorer 7</td>
92
			<td>Win XP SP2+</td>
93
			<td class="center">7</td>
94
			<td class="center">A</td>
95
		</tr>
96
		<tr class="even_gradeA">
97
			<td>Trident</td>
98
			<td>AOL browser (AOL desktop)</td>
99
			<td>Win XP</td>
100
			<td class="center">6</td>
101
			<td class="center">A</td>
102
		</tr>
103
		<tr class="odd_gradeA">
104
			<td>Gecko (UTF-8: $¢€)</td>
105
			<td>Firefox 1.0</td>
106
			<td>Win 98+ / OSX.2+</td>
107
			<td class="center">1.7</td>
108
			<td class="center">A</td>
109
		</tr>
110
		<tr class="even_gradeA">
111
			<td>Gecko</td>
112
			<td>Firefox 1.5</td>
113
			<td>Win 98+ / OSX.2+</td>
114
			<td class="center">1.8</td>
115
			<td class="center">A</td>
116
		</tr>
117
		<tr class="odd_gradeA">
118
			<td>Gecko</td>
119
			<td>Firefox 2.0</td>
120
			<td>Win 98+ / OSX.2+</td>
121
			<td class="center">1.8</td>
122
			<td class="center">A</td>
123
		</tr>
124
		<tr class="even_gradeA">
125
			<td>Gecko</td>
126
			<td>Firefox 3.0</td>
127
			<td>Win 2k+ / OSX.3+</td>
128
			<td class="center">1.9</td>
129
			<td class="center">A</td>
130
		</tr>
131
		<tr class="odd_gradeA">
132
			<td>Gecko</td>
133
			<td>Camino 1.0</td>
134
			<td>OSX.2+</td>
135
			<td class="center">1.8</td>
136
			<td class="center">A</td>
137
		</tr>
138
		<tr class="even_gradeA">
139
			<td>Gecko</td>
140
			<td>Camino 1.5</td>
141
			<td>OSX.3+</td>
142
			<td class="center">1.8</td>
143
			<td class="center">A</td>
144
		</tr>
145
		<tr class="odd_gradeA">
146
			<td>Gecko</td>
147
			<td>Netscape 7.2</td>
148
			<td>Win 95+ / Mac OS 8.6-9.2</td>
149
			<td class="center">1.7</td>
150
			<td class="center">A</td>
151
		</tr>
152
		<tr class="even_gradeA">
153
			<td>Gecko</td>
154
			<td>Netscape Browser 8</td>
155
			<td>Win 98SE+</td>
156
			<td class="center">1.7</td>
157
			<td class="center">A</td>
158
		</tr>
159
		<tr class="odd_gradeA">
160
			<td>Gecko</td>
161
			<td>Netscape Navigator 9</td>
162
			<td>Win 98+ / OSX.2+</td>
163
			<td class="center">1.8</td>
164
			<td class="center">A</td>
165
		</tr>
166
		<tr class="even_gradeA">
167
			<td>Gecko</td>
168
			<td>Mozilla 1.0</td>
169
			<td>Win 95+ / OSX.1+</td>
170
			<td class="center">1</td>
171
			<td class="center">A</td>
172
		</tr>
173
		<tr class="odd_gradeA">
174
			<td>Gecko</td>
175
			<td>Mozilla 1.1</td>
176
			<td>Win 95+ / OSX.1+</td>
177
			<td class="center">1.1</td>
178
			<td class="center">A</td>
179
		</tr>
180
		<tr class="even_gradeA">
181
			<td>Gecko</td>
182
			<td>Mozilla 1.2</td>
183
			<td>Win 95+ / OSX.1+</td>
184
			<td class="center">1.2</td>
185
			<td class="center">A</td>
186
		</tr>
187
		<tr class="odd_gradeA">
188
			<td>Gecko</td>
189
			<td>Mozilla 1.3</td>
190
			<td>Win 95+ / OSX.1+</td>
191
			<td class="center">1.3</td>
192
			<td class="center">A</td>
193
		</tr>
194
		<tr class="even_gradeA">
195
			<td>Gecko</td>
196
			<td>Mozilla 1.4</td>
197
			<td>Win 95+ / OSX.1+</td>
198
			<td class="center">1.4</td>
199
			<td class="center">A</td>
200
		</tr>
201
		<tr class="odd_gradeA">
202
			<td>Gecko</td>
203
			<td>Mozilla 1.5</td>
204
			<td>Win 95+ / OSX.1+</td>
205
			<td class="center">1.5</td>
206
			<td class="center">A</td>
207
		</tr>
208
		<tr class="even_gradeA">
209
			<td>Gecko</td>
210
			<td>Mozilla 1.6</td>
211
			<td>Win 95+ / OSX.1+</td>
212
			<td class="center">1.6</td>
213
			<td class="center">A</td>
214
		</tr>
215
		<tr class="odd_gradeA">
216
			<td>Gecko</td>
217
			<td>Mozilla 1.7</td>
218
			<td>Win 98+ / OSX.1+</td>
219
			<td class="center">1.7</td>
220
			<td class="center">A</td>
221
		</tr>
222
		<tr class="even_gradeA">
223
			<td>Gecko</td>
224
			<td>Mozilla 1.8</td>
225
			<td>Win 98+ / OSX.1+</td>
226
			<td class="center">1.8</td>
227
			<td class="center">A</td>
228
		</tr>
229
		<tr class="odd_gradeA">
230
			<td>Gecko</td>
231
			<td>Seamonkey 1.1</td>
232
			<td>Win 98+ / OSX.2+</td>
233
			<td class="center">1.8</td>
234
			<td class="center">A</td>
235
		</tr>
236
		<tr class="even_gradeA">
237
			<td>Gecko</td>
238
			<td>Epiphany 2.20</td>
239
			<td>Gnome</td>
240
			<td class="center">1.8</td>
241
			<td class="center">A</td>
242
		</tr>
243
		<tr class="odd_gradeA">
244
			<td>Webkit</td>
245
			<td>Safari 1.2</td>
246
			<td>OSX.3</td>
247
			<td class="center">125.5</td>
248
			<td class="center">A</td>
249
		</tr>
250
		<tr class="even_gradeA">
251
			<td>Webkit</td>
252
			<td>Safari 1.3</td>
253
			<td>OSX.3</td>
254
			<td class="center">312.8</td>
255
			<td class="center">A</td>
256
		</tr>
257
		<tr class="odd_gradeA">
258
			<td>Webkit</td>
259
			<td>Safari 2.0</td>
260
			<td>OSX.4+</td>
261
			<td class="center">419.3</td>
262
			<td class="center">A</td>
263
		</tr>
264
		<tr class="even_gradeA">
265
			<td>Webkit</td>
266
			<td>Safari 3.0</td>
267
			<td>OSX.4+</td>
268
			<td class="center">522.1</td>
269
			<td class="center">A</td>
270
		</tr>
271
		<tr class="odd_gradeA">
272
			<td>Webkit</td>
273
			<td>OmniWeb 5.5</td>
274
			<td>OSX.4+</td>
275
			<td class="center">420</td>
276
			<td class="center">A</td>
277
		</tr>
278
		<tr class="even_gradeA">
279
			<td>Webkit</td>
280
			<td>iPod Touch / iPhone</td>
281
			<td>iPod</td>
282
			<td class="center">420.1</td>
283
			<td class="center">A</td>
284
		</tr>
285
		<tr class="odd_gradeA">
286
			<td>Webkit</td>
287
			<td>S60</td>
288
			<td>S60</td>
289
			<td class="center">413</td>
290
			<td class="center">A</td>
291
		</tr>
292
		<tr class="even_gradeA">
293
			<td>Presto</td>
294
			<td>Opera 7.0</td>
295
			<td>Win 95+ / OSX.1+</td>
296
			<td class="center">-</td>
297
			<td class="center">A</td>
298
		</tr>
299
		<tr class="odd_gradeA">
300
			<td>Presto</td>
301
			<td>Opera 7.5</td>
302
			<td>Win 95+ / OSX.2+</td>
303
			<td class="center">-</td>
304
			<td class="center">A</td>
305
		</tr>
306
		<tr class="even_gradeA">
307
			<td>Presto</td>
308
			<td>Opera 8.0</td>
309
			<td>Win 95+ / OSX.2+</td>
310
			<td class="center">-</td>
311
			<td class="center">A</td>
312
		</tr>
313
		<tr class="odd_gradeA">
314
			<td>Presto</td>
315
			<td>Opera 8.5</td>
316
			<td>Win 95+ / OSX.2+</td>
317
			<td class="center">-</td>
318
			<td class="center">A</td>
319
		</tr>
320
		<tr class="even_gradeA">
321
			<td>Presto</td>
322
			<td>Opera 9.0</td>
323
			<td>Win 95+ / OSX.3+</td>
324
			<td class="center">-</td>
325
			<td class="center">A</td>
326
		</tr>
327
		<tr class="odd_gradeA">
328
			<td>Presto</td>
329
			<td>Opera 9.2</td>
330
			<td>Win 88+ / OSX.3+</td>
331
			<td class="center">-</td>
332
			<td class="center">A</td>
333
		</tr>
334
		<tr class="even_gradeA">
335
			<td>Presto</td>
336
			<td>Opera 9.5</td>
337
			<td>Win 88+ / OSX.3+</td>
338
			<td class="center">-</td>
339
			<td class="center">A</td>
340
		</tr>
341
		<tr class="odd_gradeA">
342
			<td>Presto</td>
343
			<td>Opera for Wii</td>
344
			<td>Wii</td>
345
			<td class="center">-</td>
346
			<td class="center">A</td>
347
		</tr>
348
		<tr class="even_gradeA">
349
			<td>Presto</td>
350
			<td>Nokia N800</td>
351
			<td>N800</td>
352
			<td class="center">-</td>
353
			<td class="center">A</td>
354
		</tr>
355
		<tr class="odd_gradeA">
356
			<td>Presto</td>
357
			<td>Nintendo DS browser</td>
358
			<td>Nintendo DS</td>
359
			<td class="center">8.5</td>
360
			<td class="center">C/A<sup>1</sup></td>
361
		</tr>
362
		<tr class="even_gradeC">
363
			<td>KHTML</td>
364
			<td>Konqureror 3.1</td>
365
			<td>KDE 3.1</td>
366
			<td class="center">3.1</td>
367
			<td class="center">C</td>
368
		</tr>
369
		<tr class="odd_gradeA">
370
			<td>KHTML</td>
371
			<td>Konqureror 3.3</td>
372
			<td>KDE 3.3</td>
373
			<td class="center">3.3</td>
374
			<td class="center">A</td>
375
		</tr>
376
		<tr class="even_gradeA">
377
			<td>KHTML</td>
378
			<td>Konqureror 3.5</td>
379
			<td>KDE 3.5</td>
380
			<td class="center">3.5</td>
381
			<td class="center">A</td>
382
		</tr>
383
		<tr class="odd_gradeX">
384
			<td>Tasman</td>
385
			<td>Internet Explorer 4.5</td>
386
			<td>Mac OS 8-9</td>
387
			<td class="center">-</td>
388
			<td class="center">X</td>
389
		</tr>
390
		<tr class="even_gradeC">
391
			<td>Tasman</td>
392
			<td>Internet Explorer 5.1</td>
393
			<td>Mac OS 7.6-9</td>
394
			<td class="center">1</td>
395
			<td class="center">C</td>
396
		</tr>
397
		<tr class="odd_gradeC">
398
			<td>Tasman</td>
399
			<td>Internet Explorer 5.2</td>
400
			<td>Mac OS 8-X</td>
401
			<td class="center">1</td>
402
			<td class="center">C</td>
403
		</tr>
404
		<tr class="even_gradeA">
405
			<td>Misc</td>
406
			<td>NetFront 3.1</td>
407
			<td>Embedded devices</td>
408
			<td class="center">-</td>
409
			<td class="center">C</td>
410
		</tr>
411
		<tr class="odd_gradeA">
412
			<td>Misc</td>
413
			<td>NetFront 3.4</td>
414
			<td>Embedded devices</td>
415
			<td class="center">-</td>
416
			<td class="center">A</td>
417
		</tr>
418
		<tr class="even_gradeX">
419
			<td>Misc</td>
420
			<td>Dillo 0.8</td>
421
			<td>Embedded devices</td>
422
			<td class="center">-</td>
423
			<td class="center">X</td>
424
		</tr>
425
		<tr class="odd_gradeX">
426
			<td>Misc</td>
427
			<td>Links</td>
428
			<td>Text only</td>
429
			<td class="center">-</td>
430
			<td class="center">X</td>
431
		</tr>
432
		<tr class="even_gradeX">
433
			<td>Misc</td>
434
			<td>Lynx</td>
435
			<td>Text only</td>
436
			<td class="center">-</td>
437
			<td class="center">X</td>
438
		</tr>
439
		<tr class="odd_gradeC">
440
			<td>Misc</td>
441
			<td>IE Mobile</td>
442
			<td>Windows Mobile 6</td>
443
			<td class="center">-</td>
444
			<td class="center">C</td>
445
		</tr>
446
		<tr class="even_gradeC">
447
			<td>Misc</td>
448
			<td>PSP browser</td>
449
			<td>PSP</td>
450
			<td class="center">-</td>
451
			<td class="center">C</td>
452
		</tr>
453
		<tr class="odd_gradeU">
454
			<td>Other browsers</td>
455
			<td>All others</td>
456
			<td>-</td>
457
			<td class="center">-</td>
458
			<td class="center">U</td>
459
		</tr>
460
	</tbody>
461
</table>
462
			</div>
463
			<div class="spacer"></div>
464
 
465
 
466
			<h1>Initialisation code</h1>
467
			<pre>$(document).ready( function () {
468
	$('#example').dataTable( {
469
		"sDom": 'T&lt;"clear"&gt;lfrtip',
470
		"oTableTools": {
471
			"sRowSelect": "multi",
472
			"aButtons": [ "select_all", "select_none" ]
473
		}
474
	} );
475
} );</pre>
476
 
477
 
478
			<h1>Other examples</h1>
479
			<ul>
480
				<li><a href="index.html">Basic initialisation</a></li>
481
				<li><a href="swf_path.html">Setting the SWF path</a></li>
482
				<li><a href="alter_buttons.html">Custom button arrangement</a></li>
483
				<li><a href="button_text.html">Button text alteration</a></li>
484
				<li><a href="collection.html">Using button collections</a></li>
485
				<li><a href="theme.html">Using jQuery UI themes</a></li>
486
				<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
487
				<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
488
				<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
489
				<li><a href="select_single.html">User selectable rows (single row)</a></li>
490
				<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
491
				<li><a href="defaults.html">Altering the TableTools defaults</a></li>
492
				<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
493
				<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
494
			</ul>
495
 
496
 
497
			<div id="footer" style="text-align:center;">
498
				<span style="font-size:10px;">
499
					TableTools and DataTables &copy; Allan Jardine 2009-2011.<br>
500
					Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
501
					The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
502
				</span>
503
			</div>
504
		</div>
505
	</body>
506
</html>