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