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