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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery tablesorter 2.0 - Build Table 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>
<script src="js/demo-build-table.js"></script>
<style>
.csv { display: none; }
.tablesorter-blue td.info { background: #eee; }
</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<!-- build table widget -->
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Build Table Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<br>
<div class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>To bind events to the newly created table, see the <strong>Adding event bindings</strong> section below.</li>
<li>Build a table starting with an assortment of data types ( array, text (CSV, HTML) or object (json) ).</li>
<li>This widget isn't really a widget because it is run and does it's processing before tablesorter has initialized; but the options for it are contained within the tablesorter <code>widgetOptions</code>.</li>
<li>Using the core build options:
<ul>
<li>The <code>build_type</code> tells the widget which type of data processing to use on the data.</li>
<li>The <code>build_source</code> points the widget to the data source.</li>
<li>Once the data is obtained from the <code>build_source</code>, you can do whatever processing that needs to be done on it using the <code>build_processing</code> option.
<ul>
<li>For example, if the table data is within a larger JSON, you can just return that portion of the JSON to the widget: <code>build_processing : function(data, wo) { return data.all_info_tables.table_of_contents; }</code></li>
<li>Anoter example is to use the processing option to split a string into an array (see the "Array (from string w/processing)" section below)</li>
</ul>
</li>
</ul>
</li>
<li>An extra option named <code>build_numbers</code> has been included:
<ul>
<li>This option only applies to array and csv source table builds.</li>
<li>Set the <code>build_numbers.addColumn</code> option to <code>true</code> (or a string with the column name <code>"#"</code>) to add a row number column on the far left of the table.</li>
<li>Set the <code>build_numbers.sortable</code> option to <code>true</code> to make the added number column sortable. This option only applies if the <code>addColumn</code> option is <code>true</code>.</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Adding event bindings</a></h3>
<div>
<p>Internally, all triggered events use jQuery's <a href="http://api.jquery.com/triggerHandler/">triggerHandler</a> method to get around the issue of events triggered on a nested table bubbling up to the parent table; e.g. we don't want a "sortEnd" event to trigger on a parent table when a nested table has completed sorting.</p>
<strong>A binding added to the wrapper will not execute, and you can not target a table element that has not yet been created.</strong>
<p>To add an event listener to a table created by the build widget, you will need to use the <code>initialized</code> callback:</p>
HTML (before)
<pre class="prettyprint lang-html"><!-- empty wrapper before the table has been built -->
<div id="wrapper"></div>
</pre>
Javascript
<pre class="prettyprint lang-js">$(function() {
$('#wrapper').tablesorter({
theme: 'blue',
widgets: ['zebra'],
data : dataObject,
initialized: function(table) {
$(table).on('sortStart', function() {
alert('ok');
});
}
});
});</pre>
HTML (after)
<pre class="prettyprint lang-html"><div id="wrapper">
<table class="tablesorter-blue">
<!-- ... -->
</table>
</div>
</pre>
<p></p>
</div>
<h3><a href="#">Options</a></h3>
<div>
<table class="tablesorter-blue">
<colgroup>
<col style="width:10%">
<col style="width:10%">
<col style="width:15%">
<col style="width:65%">
</colgroup>
<thead>
<tr>
<th>widgetOption</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="info">Core Options</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_type</code></a></td>
<td>String</td>
<td><code>""</code></td>
<td>
Indicate the data result type that needs to be processed
<div class="collapsible"><br>
Options include: <code>"array"</code>, <code>"csv"</code>, <code>"object"</code>, <code>"json"</code> or <code>"html"</code>.<br>
Default is <code>""</code> (an empty string).
</div>
</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_source</code></a></td>
<td>String</td>
<td><code>""</code></td>
<td>
Contains the data stored as an array, object, jQuery object or <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> used to obtain ajax data (include any desired ajax options).
<div class="collapsible"><br>
Options include: an array, object, jQuery Object (<code>$('.csv')</code>) or ajax settings( <code>{ url: 'mysite.com/data.json', dataType: 'json' }</code> ).
</div>
</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_processing</code></a></td>
<td>Function</td>
<td><code>null</code></td>
<td>
Add a function that returns a useable build_type. (e.g. string to array)
<div class="collapsible"><br>
The function receives two parameters: <code>data</code> which contains the obtained data and <code>wo</code> which is the widget options (<code>table.config.widgetOptions</code>).<br>
Example: <code>build_processing: function(data, wo) { return data.split(';'); }</code>
</div>
</td>
</tr>
<tr>
<td><span class="permalink"><code>build_complete</code></span></td>
<td>String</td>
<td><code>"tablesorter-build-complete"</code></td>
<td>Contains the name of the event to trigger when a table build has completed.</td>
</tr>
<tr>
<td colspan="4" class="info">CSV & Array Options</td>
</tr>
<tr>
<td><span class="permalink"><code>build_headers.rows</code></span></td>
<td>Numeric</td>
<td><code>1</code></td>
<td>Number of header rows contained within the csv</td>
</tr>
<tr>
<td><span class="permalink"><code>build_headers.classes</code></span></td>
<td>Array</td>
<td><code>[]</code></td>
<td>Array of header class names to add while building the table header.</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_headers.text</code></a></td>
<td>Array</td>
<td><code>[]</code></td>
<td>Array of header cell names to add while building the table header.
<div class="collapsible"><br>
Any value contained within this option will override any header text obtained from the CSV data.
</div>
</td>
</tr>
<tr>
<td><span class="permalink"><code>build_headers.widths</code></span></td>
<td>Array</td>
<td><code>[]</code></td>
<td>Array of header cell widths which are added to a <code><col></code> within a <code><colgroup></code>.</td>
</tr>
<tr>
<td><span class="permalink"><code>build_footers.rows</code></span></td>
<td>Numeric</td>
<td><code>1</code></td>
<td>Number of footer rows contained within the csv</td>
</tr>
<tr>
<td><span class="permalink"><code>build_footers.classes</code></span></td>
<td>Array</td>
<td><code>[]</code></td>
<td>Array of footer class names to add while building the table footer.</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_footers.text</code></a></td>
<td>Array</td>
<td><code>[]</code></td>
<td>Array of footer cell names to add while building the table footer.
<div class="collapsible"><br>
Any value contained within this option will override any footer text obtained from the CSV data.
</div>
</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_numbers.addColumn</code></a></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Include a row numbering column.
<div class="collapsible"><br>
Only works with csv or array data.
</div>
</td>
</tr>
<tr>
<td><a href="#" class="permalink"><code>build_numbers.sortable</code></a></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Make the included row number column sortable.
<div class="collapsible"><br>
Only works when the <code>build_numbers.addColumn</code> is <code>true</code> and when csv or array data is used.
</div>
</td>
</tr>
<tr>
<td colspan="4" class="info">CSV Only Options</td>
</tr>
<tr>
<td><span class="permalink"><code>build_csvStartLine</code></span></td>
<td>Numeric</td>
<td><code>0</code></td>
<td>The line within the csv data to start building the table</td>
</tr>
<tr>
<td><span class="permalink"><code>build_csvSeparator</code></span></td>
<td>String</td>
<td><code>","</code> (comma)</td>
<td>The separator used within the text file (comma or tab)</td>
</tr>
<tr>
<td colspan="4" class="info">Object Only Options</td>
</tr>
<tr>
<td><span class="permalink"><code>build_objectRowKey</code></span></td>
<td>String</td>
<td><code>"rows"</code></td>
<td>Object key which contains row data</td>
</tr>
<tr>
<td><span class="permalink"><code>build_objectCellKey</code></span></td>
<td>String</td>
<td><code>"cells"</code></td>
<td>Object key which contains the table cells, within the row data</td>
</tr>
<tr>
<td><span class="permalink"><code>build_objectHeaderKey</code></span></td>
<td>String</td>
<td><code>"headers"</code></td>
<td>Object key which contains the table headers data</td>
</tr>
<tr>
<td><span class="permalink"><code>build_objectFooterKey</code></span></td>
<td>String</td>
<td><code>"footers"</code></td>
<td>Object key which contains the table footers data</td>
</tr>
</tbody>
</table>
</div> <!-- end options -->
<h3><a href="#">Setup - Common (document head)</a></h3>
<div>
Add the following required scripts and css files into the document <code><head></code>
<pre class="prettyprint lang-html"><!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css"> <!-- choose any theme -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- build table widget -->
<script type="text/javascript" src="../js/widgets/widget-build-table.js"></script></pre>
</div>
<h3><a href="#">Setup - Array (javascript variable)</a></h3>
<div>
<h3>Notes</h3>
<ul>
<li>The array is set up such that it is an array of arrays. The outer array contains each row array, and within each row array is the cell text.</li>
<li>Using an array is limiting, so addtional options have been added:
<ul>
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
</ul>
</li>
</ul>
<h3>HTML</h3>
<pre class="prettyprint lang-html"><div id="array2Table"></div></pre>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
var arry = [
[ 'ID', 'Name', 'Age', 'Date' ], // header
[ 'A42b', 'Parker', 28, 'Jul 6, 2006 8:14 AM' ], // row 1
[ 'A255', 'Hood', 33, 'Dec 10, 2002 5:14 AM' ], // row 2
[ 'A33', 'Kent', 18, 'Jan 12, 2003 11:14 AM' ], // row 3
[ 'A1', 'Franklin', 45, 'Jan 18, 2001 9:12 AM' ], // row 4
[ 'A102', 'Evans', 22, 'Jan 18, 2007 9:12 AM' ], // row 5
[ 'A42a', 'Everet', 22, 'Jan 18, 2007 9:12 AM' ], // row 6
[ 'ID', 'Name', 'Age', 'Date' ] // footer
];
$('#array2Table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions : {
// build_type : 'array', // can sometimes be detected if undefined
build_source : arry,
build_headers : {
rows : 1, // Number of header rows from the csv
classes : [], // Header classes to apply to cells
text : [], // Header cell text
widths : [ '15%', '30%', '15%', '40%' ] // set header cell widths
},
build_footers : {
rows : 1, // Number of header rows from the csv
classes : [], // Footer classes to apply to cells
text : [ 'ID (a###)', 'Last Name', 'Age (joined)', 'Date (joined)' ] // Footer cell text
}
}
});
});</pre>
<h3>Result</h3>
<div id="array2Table" class="container"></div>
</div>
<h3><a href="#">Setup - Array (from string w/processing)</a></h3>
<div>
<h3>Notes</h3>
<ul>
<li>We start out with a string and split it into a useable array of arrays.</li>
<li>The settings are similair to the Array (javascript variable) code above with the exception of using the <code>build_processing</code> function to create the array.
<ul>
<li>The string is set up to separate each row by a semi-colon, then each cell by a comma.</li>
<li>The first split is needed to create an array of rows <code>.split(';')</code></li>
<li>The second split can be accomplished using <code>.split(',')</code> on each row of the array, but instead we use the build table widget function <code>$.tablesorter.buildTable.splitCSV(cells, ',');</code> to ensure that the split doesn't occur if the separator is within double quotes (note the footer text).</li>
<li>Then just return this newly built array back to the build table widget (see the full code below).</li>
</ul>
</li>
</ul>
<h3>HTML</h3>
<pre class="prettyprint lang-html"><div id="string2Table"></div></pre>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
$('#string2Table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
build_type : 'array',
build_source : 'header 1,header 2,header 3;r1c1,r1c2,r1c3;r2c1,r2c2,r2c3;r3c1,r3c2,r3c3;"footer, 1","footer, 2","footer, 3"',
build_processing : function(data, wo) {
var rows = data.split(';');
return $.each(rows, function(i,cells) {
// similar to using rows[i] = cells.split(',') but the splitCSV script
// doesn't split the cell if the separator (comma) is within double quotes
rows[i] = $.tablesorter.buildTable.splitCSV(cells, ',');
});
}
}
});
});</pre>
<h3>Result</h3>
<div id="string2Table" class="container"></div>
</div>
<h3><a href="#">Setup - CSV (txt within DOM element)</a></h3>
<div>
<h3>Notes</h3>
<ul>
<li>A jQuery object targeting the CSV text can be passed to the <code>build_source</code> option.</li>
<li>The widget detects that a jQuery object was passed to it, and grabs the HTML (not text) of the element.
<ul>
<li>Make sure not include HTML tags, or at least use the <code>build_processing</code> function to reformat the data.</li>
<li>The row of csv data is trimmed of extra tabs and spaces (only from the beginning & end of each row).</li>
<li>Building a table from CSV or array use the same script, so the same addtional options are available:
<ul>
<li>(<code>build_headers</code> & <code>build_footers</code>) have been added allowing customizing the headers and/or footers.</li>
<li>The <code>rows</code> option sets the number of headers rows to include from the data source. <strong>Zero is not an option</strong> since tablesorter requires a thead in place before it will initialize.</li>
<li>The <code>classes</code> array sets each header cell (<code>th</code>) class name.</li>
<li>The <code>text</code> array within these options will override any text obtained from the data source.</li>
<li>The <code>widths</code> array, only in the <code>build_headers</code> option, sets column widths by building <code><col></code> elements within a <code><colgroup</code>.</li>
<li>Adding class names to the tbody rows or cells isn't easily accomplished, but you can bind to the build complete event (<code>'tablesorter-build-complete'</code>) and add them yourself.</li>
</ul>
</li>
<li>CSV data has two additional options used during data processing:
<ul>
<li><code>build_csvStartLine</code> (default is <code>0</code>) tells the csv build script which line in the csv data to start using to build the table. This is added in case comments or other data is above the table data.</li>
<li><code>build_csvSeparator</code> (default is <code>","</code>)
<ul>
<li>This sets the separator used within the csv data to separate each cell.</li>
<li>The <a href="https://code.google.com/p/jquerycsvtotable/">original jquerycsvtotable plugin</a> shows an <a href="http://honestbleeps.com/csvtotable/demo.html#TSVSource">example to process tab separated values (TSV)</a> by setting this option to <code>"\t"</code>.</li>
<li>Rows are determined by placing the data on a new line.</li>
</ul>
</li>
</ul>
</li>
<li>In this demo, the <code>build_numbers</code> sub-options <code>addColumn</code> and <code>sortable</code> are set to add a numeric column on the left side.
<ul>
<li>The <code>addColumn</code> option contains the name of the numeric column to be added to the header. Otherwise, set this option to <code>false</code> to not build this numeric column.</li>
<li>The <code>sortable</code> option makes that numeric column sortable.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3>HTML</h3>
<pre class="prettyprint lang-html"><!--
Note: if the csv data contains commas ("10,000 days") wrap it in quotes
-->
<div class="csv" style="display:none;">
Album,Artist,Price (USD)
Lateralus,Tool,$13.00
Aenima,Tool,$12.00
"10,000 days",Tool,$14.00
Down In It,Nine Inch Nails,$3.00
Broken,Nine Inch Nails,$6.00
Muse,Black Holes and Revelations,$7.00
Anon,"fake album, with comma", $1.00
Album,Artist,Price (USD)
</div>
<div id="csv2Table"></div></pre>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
$('#csv2Table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
// *** build widget core ***
build_type : 'csv',
build_source : $('.csv'),
build_complete : 'tablesorter-build-complete', // triggered event when build completes
// *** CSV & array ***
build_headers : {
rows : 1, // Number of header rows from the csv
classes : [], // Header classes to apply to cells
text : [], // Header cell text
widths : ['3%', '27%', '50%', '20%'] // set header cell widths
},
build_footers : {
rows : 1, // Number of header rows from the csv
classes : [], // Footer classes to apply to cells
text : [] // Footer cell text
},
build_numbers : {
addColumn : "#", // include row numbering column?
sortable : true // make column sortable?
},
// *** CSV options ***
build_csvStartLine : 0, // line within the csv to start adding to table
build_csvSeparator : "," // csv separator
}
});
});</pre>
<h3>Result</h3>
<div id="csv2Table" class="container"></div>
</div>
<h3><a href="#">Setup - CSV (txt file via ajax)</a></h3>
<div>
<h3>Notes</h3>
<ul>
<li>If the csv data is obtained via ajax instead of from a DOM element, only the <code>build_source</code> option needs to change, everything else stays the same.
<ul>
<li>Set the <code>build_source</code> to contain any <a href="http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings">ajax settings</a> required to load the data.</li>
<li>In this case the csv file is contained within a text file (<code>build.txt</code>), so a <code>url</code> option is set to point to the file and the <code>dataType</code> option (set to <code>html</code>) is set so that ajax knows the type of file to access.</li>
<li>The remaining default settings were left out of the example below.</li>
</ul>
</li>
<li>Please note that browsers like Chrome will not allow you to access locally hosted (desktop) files. Test it with Firefox instead.</li>
</ul>
<h3>Build.txt file</h3>
<pre class="prettyprint lang-html">Album,Artist,Price ($)
Lateralus,Tool,$13.00
Aenima,Tool,$12.00
"10,000 days",Tool,$14.00
Down In It,Nine Inch Nails,$3.00
Broken,Nine Inch Nails,$6.00
Muse,Black Holes and Revelations,$7.00
Anon,"fake album, with comma", $1.00
Album,Artist,Price ($)</pre>
<h3>HTML</h3>
<pre class="prettyprint lang-html"><div id="csv2Table2"></div></pre>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
$('#csv2Table2').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
// *** build widget core ***
build_type : 'csv',
build_source : { url: 'assets/csv.txt', dataType: 'text' },
build_headers : {
widths : ['30%', '50%', '20%'] // set header cell widths
}
}
});
});</pre>
<h3>Result</h3>
<div id="csv2Table2" class="container"></div>
</div>
<h3><a href="#">Setup - Object (javascript variable)</a></h3>
<div>
<h3>Notes</h3>
<div class="accordion">
<h3><a href="#">Definitions - General:</a></h3>
<div>
These are definitions to words as used within this documentation.
<ul>
<li>A <strong>key-value pair</strong> (or <strong>attribute</strong>): Within an object, the way to assign a value is by using a key-value pair (<code>"name" : "Fred"</code>; which is like saying <code>name = "Fred"</code> or <code>x = 1</code> outside of an object).</li>
<li>A <strong>block</strong> is essentially the "value" portion of a key-value pair; specifically when referring to the value of the header, footer, row and cell blocks.</li>
<li>An <strong>array</strong> is a list or group of values (i.e. <code>['x','y','z']</code>).</li>
<li>An <strong>array of arrays</strong> is an array that contains more arrays (i.e. <code>[ ['a','b','c'], ['d','e','f' ] ]</code>). This applies to the header, row and footer blocks.</li>
<li>Any build table widget object:
<ul>
<li>These objects are a grouping of key-value pairs used to define a tbody, row or cell.</li>
<li>These objects contains all of the attributes which are to be added to a table element while building the table.</li>
<li>The keys used in these attributes will look familiar - <code>class</code> (see row 7 below), <code>colspan</code> (see row 4 below), <code>data-</code>attributes (see row 7 cell 3 below), etc.</li>
<li>Depending on where an object is located (tbody, row or cell), it will have a special key word or words which are significant (see the Objects section below).</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Blocks:</a></h3>
<div>
(row #), or (row # cell #) in these descriptions refer to the demo object code below
<ul>
<li><code>header</code> block:
<ul>
<li>This block will contain an array of rows. The rows can be defined as another array of cell text (row 1-3,5-6), or row objects (row 0, 4 & 7).</li>
<li>The <code>header</code> object key name can be modified by changing the widget <code>build_objectHeaderKey</code> option.</li>
</ul>
</li>
<li><code>footers</code> block:
<ul>
<li>This block can contain all of the same data as the header block.</li>
<li>This block has one additional setting, it can also contain a very specific string: <code>"clone"</code>. When this setting is used, the footer will be created by making a clone of the header.</li>
<li>The <code>footers</code> object key name can be modified by changing the widget <code>build_objectFooterKey</code> option.</li>
</ul>
</li>
<li><code>rows</code> block:
<ul>
<li>This block will contain an array of rows. The rows can be defined as another array of cell text, or as a row object (same as the header & footer blocks).</li>
<li>In addition, this block can contain a tbody object (tbody 2 & tbody 3; see the tbody object section below for more details).</li>
<li>The <code>rows</code> object key name can be modified by changing the widget <code>build_objectRowKey</code> option.</li>
</ul>
</li>
<li><code>cells</code> block:
<ul>
<li>This block will contain an array of cells. The cells can be defined as cell text (string), or cell objects.</li>
<li>The <code>cells</code> object key name can be modified by changing the widget <code>build_objectCellKey</code> option.</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Object Content</a></h3>
<div>
<ul>
<li>tbody object
<ul>
<li>The tbody object contains all of the attributes that are to be applied to a particular table tbody (<code>tbody</code>).</li>
<li>The tbody object <strong>requires</strong> a <code>newTbody</code> key set to <code>true</code>. It is the ONLY way the build widget can differeniate a row object from a "new" tbody object.</li>
<li>If the <code>newTbody</code> attribute is <code>true</code>, the build widget will place all remaining rows into a new tbody; or all rows, until it encounters another valid tbody object, into a new tbody.</li>
<li>If the <code>newTbody</code> attribute is <code>false</code>, the build widget will assume the object is for a row and add it as a row.</li>
<li>See "TBODY 2" and "TBODY 3" tbody objects in the code example below.</li>
</ul>
</li>
<li>row object
<ul>
<li>The row object contains all of the attributes that are to be applied to a particular table row (<code>tr</code>).</li>
<li>The row object requires a <code>cells</code> attribute.</li>
<li>The cells attribute will contain all table cell data for the cells within that table row.</li>
<li>This attribute can be changed by modifying the build table widget's <code>build_objectCellKey</code> (default is <code>"cells"</code>).</li>
<li>See row 4 and row 7 in the demo code below.</li>
</ul>
</li>
<li>row array
<ul>
<li>A row array can contain either the text for a table cell (row 0 cell 2 & 4), or a cell object (row 0 cell 1,3,5,6) contains.</li>
<li>It can also contain all cell text (row 1-3,5-6) or all cell objects (almost row 7) for cells within that row.</li>
<li>This method does not allow adding any row (<code>tr</code>) attributes, (i.e. class or data-attributes).</li>
</ul>
</li>
<li>cell object
<ul>
<li>The cell object contains all of the attributes that are to be applied to a particular table cell (<code>th</code> (thead or tfoot) or <code>td</code> (tbody).</li>
<li>This object requires either a <code>text</code> (row 0 & row 7) or <code>html</code> (row 4) attribute to add content into the cell.</li>
<li>Within the first header row only, if a <code>width</code> attribute is defined, it will be applied to a <code><col></code> element and placed within a <code><colgroup></code> before the header.</li>
<li>See row 0 (header), row 4 and row 7 (rows) in the demo code below.</li>
</ul>
</li>
<li>cell text
<ul>
<li>Within a row array or object, only the cell text can be included (row 0 cell 2,4; row 1-3,5-6; row 7 cell 5).</li>
<li>Within the header only, whenever cell content is added as a string, the widget will check the <code>widgetOptions.build_headers.classes</code> & <code>wo.build_headers.widths</code> (first row only) and apply any values it finds for that column to those cells.</li>
</ul>
</li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint lang-html"><div id="object2Table"></div></pre>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
// object or JSON
var dataObject = {
headers : [
[
// each object/string is a cell
{ text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
'Last Name', // row 0 cell 2
{ text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
'Total', // row 0 cell 4
{ text: 'Discount', class : 'sorter-false' }, // row 0 cell 5
{ text: 'Date', class : 'date' } // row 0 cell 6
]
],
footers : 'clone', // clone headers or assign array like headers
rows : [
// TBODY 1
[ 'Peter', 'Parker', 28, '$9.99', '20%', 'Jul 6, 2006 8:14 AM' ], // row 1
[ 'John', 'Hood', 33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM' ], // row 2
[ 'Clark', 'Kent', 18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3
// TBODY 2
{ newTbody: true, class: 'tablesorter-infoOnly' },
{ cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4
// TBODY 3
{ newTbody: true },
[ 'Bruce', 'Evans', 22, '$13.19', '11%', 'Jan 18, 2007 9:12 AM' ], // row 5
[ 'Bruce', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM' ], // row 6
{ class: 'specialRow', // row 7
cells: [
// each object/string is a cell
{ text: 'Fred', class: 'fname' }, // row 7 cell 1
{ text: 'Smith', class: 'lname' }, // row 7 cell 2
{ text: 18, class: 'age', 'data-info': "fake ID!, he's only 16" }, // row 7 cell 3
{ text: '$22.44', class: 'total' }, // row 7 cell 4
'8%', // row 7 cell 5
{ text: 'Aug 20, 2012 10:15 AM', class: 'date' } // row 7 cell 6
],
'data-info' : 'This row likes turtles'
}
]
};
$('#object2Table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
data : dataObject, // same as using build_source (build_source would override this)
widgetOptions : {
// *** build object options ***
build_objectRowKey : 'rows', // object key containing table rows
build_objectCellKey : 'cells', // object key containing table cells (within the rows object)
build_objectHeaderKey : 'headers', // object key containing table headers
build_objectFooterKey : 'footers' // object key containing table footers
}
});
});</pre>
<h3>Result</h3>
<div id="object2Table" class="container"></div>
</div>
<h3><a href="#">Setup - Object (json file via ajax)</a></h3>
<div>
<h3>Notes</h3>
<ul>
<li>The important difference between this demo and the javascript variable demo above is that this one retrieves a JSON file:
<ul>
<li>Set the <code>build_source</code> option to contain any <a href="">ajax settings</a> to load the json.</li>
<li>To load the json file, set the <code>url</code> option to point to the json file and the <code>dataType</code> set to <code>"json"</code>.</li>
<li>The remaining default settings were left out of the example below.</li>
</ul>
</li>
<li>Please see the "Object (javascript variable)" section above for more details on how to set up the JSON for this demo.</li>
<li>Note that JSON formatting is very specific - only double quotes (<code>"</code>) can be used to wrap attributes, all keys must be wrapped in quotes, no comments, etc.</li>
<li>Always verify that the JSON is valid (use <a href="http://jsonlint.com/">JSONLint</a>) and realize that browsers like Chrome will not allow you to access locally hosted (desktop) JSON files. Test it with Firefox instead.</li>
</ul>
<h3>Javascript</h3>
<pre class="prettyprint lang-js">$(function() {
$('#object2Table2').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
build_type : 'json',
build_source : { url: 'assets/build.json', dataType: 'json' }
}
});
});</pre>
<h3>Build.json file</h3>
<pre class="prettyprint lang-js">{
"headers": [
[
{ "text": "First Name", "class": "fname", "width": "20%" },
"Last Name",
{ "text": "Age", "class": "age", "data-sorter": false },
"Total",
{ "text": "Discount", "class": "sorter-false" },
{ "text": "Date", "class": "date", "width": "20%" }
]
],
"footers": "clone",
"rows": [
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
{ "newTbody": true, "class": "tablesorter-infoOnly" },
{ "cells": [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
{ "newTbody": true },
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
[ "Brice", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
{ "class": "specialRow",
"cells": [
{ "text": "Fred", "class": "fname" },
{ "text": "Smith", "class": "lname" },
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
{ "text": "$22.44", "class": "total" },
"8%",
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
],
"data-info": "This row likes turtles"
}
]
}</pre>
<h3>HTML (before)</h3>
<pre class="prettyprint lang-html"><div id="object2Table2"></div></pre>
<h3>HTML (after)</h3>
<pre class="prettyprint lang-html"><div id="object2Table2">
<table class="tablesorter tablesorter-blue" role="grid">
<colgroup>
<col style="width: 20%;">
<col>
<col>
<col>
<col>
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th class="fname">First Name</th>
<th>Last Name</th>
<th class="age" data-sorter="false">Age</th>
<th>Total</th>
<th class="sorter-false">Discount</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</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>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr>
<td colspan="6">
<strong>JSON Info Row</strong>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Brice</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr class="specialRow" data-info="This row likes turtles">
<td class="fname">Fred</td>
<td class="lname">Smith</td>
<td class="age" data-info="fake ID!, he's only 16">18</td>
<td class="total">$22.44</td>
<td>8%</td>
<td class="date">Aug 20, 2012 10:15 AM</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="fname">First Name</th>
<th>Last Name</th>
<th class="age" data-sorter="false">Age</th>
<th>Total</th>
<th class="sorter-false">Discount</th>
<th class="date">Date</th>
</tr>
</tfoot>
</table>
</div></pre>
<h3>Result</h3>
<div id="object2Table2" class="container"></div>
</div>
</div> <!-- end accordion -->
</div> <!-- end #main -->
<div class="csv hidden">
Album,Artist,Price
Lateralus,Tool,$13.00
Aenima,Tool,$12.00
"10,000 days",Tool,$14.00
Down In It,Nine Inch Nails,$3.00
Broken,Nine Inch Nails,$6.00
Muse,Black Holes and Revelations,$7.00
Anon,"fake album, with comma", $1.00
Album,Artist,Price (USD)
</div>
</body>
</html>
|
