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