-
Notifications
You must be signed in to change notification settings - Fork 754
/
index.html
1220 lines (1085 loc) · 50.8 KB
/
index.html
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
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link href="../css/blue/style.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.min.js"></script>
<script>
$(function() {
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]],widgets:['zebra']});
$("#options").tablesorter({sortList:[[0,0]],headers:{3:{sorter:false},4:{sorter:false}}});
$("#methods,#events").tablesorter({sortList:[[0,0]],headers:{1:{sorter:false},2:{sorter:false}}});
});
</script>
</head>
<body id="root">
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Documentation</h2>
<h3>Flexible client-side table sorting</h3>
<a href="#"></a>
</div>
<div id="main">
<div class="digg">
</div>
<p>
<strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br>
<strong>Version:</strong> <a class="current-version" href="http://github.com/Mottie/tablesorter/downloads">2.0+</a> (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">changelog</a>)<br>
<strong>Licence:</strong>
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
</p>
<p class="tip update">
<em>Update!</em> New version!, and the tablesorter docs are now available in russian, head over to <a class="external" href="http://tablesorter.ru/docs/">tablesorter.ru</a>
</p>
<p class="tip">
<em>Helping out!</em> If you like tablesorter and you're feeling generous, take a look at my <a class="external" href="http://www.amazon.com/gp/registry/wishlist/3VAOWCL63NEA6/ref=wl_web/">Amazon Wish List</a> or make a donation.
</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="christian.bach@polyester.se">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Tablesorter donation">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<p>Comments and love letters can be sent to: <span class="email">christian at tablesorter dot com</span>.</p>
<p> </p>
<!--
<p class="tip">
<em>Help!</em> keep tablesorter.com up and running. If you like tablesorter, have a couple of bucks over or just feel like it. Please donate.</p>
</p>
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="christian.bach@polyester.se">
<input type="hidden" name="item_name" value="Tablesorter donation">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="amount" value="10.00">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
-->
<a name="Contents"></a>
<h1>Contents</h1>
<ol>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Demo">Demo</a></li>
<li><a href="#Getting-Started">Getting started</a></li>
<li><a href="#Examples">Examples</a></li>
<li><a href="#Configuration">Configuration</a></li>
<li><a href="#Methods">Methods</a> <span class="tip"><em>New!</em></span></li>
<li><a href="#Events">Events</a> <span class="tip"><em>New!</em></span></li>
<li><a href="#Download">Download</a></li>
<li><a href="#Compatibility">Compatibility</a></li>
<li><a href="#Support">Support</a></li>
<li><a href="#Credits">Credits</a></li>
</ol>
<a name="Introduction"></a>
<h1>Introduction</h1>
<p>
tablesorter is a <a class="external" href="http://jquery.com">jQuery</a> plugin for turning a
standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
tablesorter can successfully parse and sort many types of data including linked data in a cell.
It has many useful features including:
</p>
<ul>
<li>Multi-column sorting</li>
<li>Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. <a href="example-parsers.html">Add your own easily</a></li>
<!--
<li>Support for ROWSPAN and COLSPAN on TH elements</li>
-->
<li>Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)</li>
<li>Extensibility via <a href="example-widgets.html">widget system</a></li>
<li>Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+</li>
<li>Small code size</li>
</ul>
<a name="Demo"></a>
<h1>Demo</h1>
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0">
<thead>
<tr>
<th>Account #</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Difference</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>A42b</td>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20.9%</td>
<td>+12.1</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>A255</td>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>+12</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>A33</td>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>-26</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>A1</td>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44.7%</td>
<td>+77</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>A102</td>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>-100.9</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>A42a</td>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>0</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table>
<p class="tip">
<em>TIP!</em> Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
</p>
<a name="Getting-Started"></a>
<h1>Getting started</h1>
<p>
To use the tablesorter plugin, include the <a class="external" href="http://jquery.com">jQuery</a>
library and the tablesorter plugin inside the <code class="hilight"><head></code> tag
of your HTML document:
</p>
<pre class="html"><script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script></pre>
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:</p>
<pre class="html"><table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table></pre>
<p>Start by telling tablesorter to sort your table when the document is loaded:</p>
<pre class="js">$(function(){
$("#myTable").tablesorter();
});</pre>
<p>
Click on the headers and you'll see that your table is now sortable! You can
also pass in configuration options when you initialize the table. This tells
tablesorter to sort on the first and second column in ascending order.
</p>
<pre class="js">$(function(){
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});</pre>
<p class="tip">
<em>NOTE!</em> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <a href="#Examples">Examples</a>
</p>
<a name="Examples"></a>
<h1>Examples</h1>
<p>
These examples will show what's possible with tablesorter. You need Javascript enabled to
run these samples, just like you and your users will need Javascript enabled to use tablesorter.
</p>
<div class="box">
<h3>Basic</h3>
<h4>Sorting</h4>
<ul>
<li><a href="example-option-sort-list.html">Set an initial sorting order using options</a></li>
<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a></li>
<li><a href="example-option-sort-force.html">Force a default sorting order</a></li>
<li><a href="example-option-sort-append.html">Append a sort to the selected sorting order</a></li>
<li><a href="example-child-rows.html">Child rows; how to add rows that sort with their parent row</a></li>
<li><a href="example-child-rows-filtered.html">Child rows + filter widget; how they work together</a></li>
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
<li><a href="example-options-headers.html">Disable sort using headers options</a></li>
<li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
<li><a href="example-options-headers-order.html">Set initial sort order using header options</a></li>
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li>
</ul>
<h4>Parsers / Extracting Content</h4>
<ul>
<li><a href="example-option-digits.html">Dealing with digits!</a></li>
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> <span class="tip"><em>New! v2.0.10</em></span></li>
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> <span class="tip"><em>New! v2.0.11</em></span></li>
<li><a href="example-option-date-format.html">Changing the date format</a> <span class="tip"><em>New! v2.0.23</em></span></li>
<li><a href="example-parsers.html">Parser, writing your own</a></li>
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
</ul>
<h4>Widgets / Plugins</h4>
<ul>
<li><a href="example-apply-widget.html">Applying widgets</a></li>
<li><a href="example-widget-columns.html">Columns widget</a> <span class="tip"><em>New! v2.0.17</em></span></li>
<li><a href="example-widget-filter.html">Filter widget</a> <span class="tip"><em>New! v2.0.18</em></span></li>
<li><a href="example-widget-ui-theme.html">jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> <span class="tip"><em>New! v2.0.23.1</em></span></li>
<li><a href="example-widget-sticky-header.html">Sticky header widget</a> <span class="tip"><em>New! v2.0.21.1</em></span></li>
<li><a href="example-widget-zebra.html">Zebra stripe widget</a></li>
<li><a href="example-widgets.html">Widgets, writing your own</a></li>
<li><a href="example-pager.html">Pager plugin</a></li>
</ul>
</div>
<div class="box">
<h3>Advanced</h3>
<h4>Adding / Removing Content</h4>
<ul>
<li><a href="example-empty-table.html">Initializing tablesorter on a empty table</a></li>
<li><a href="example-ajax.html">Appending table data with ajax</a></li>
<li><a href="example-add-rows.html">Adding a table row</a> <span class="tip"><em>New! v2.0.16</em></span></li>
<li><a href="example-update-cell.html">Update the table after cell content has changed</a></li>
<li><a href="example-pager.html">Pager plugin</a> - examples of how to add and remove rows</li>
</ul>
<h4>Change Header Style</h4>
<ul>
<li><a href="example-widget-ui-theme.html">jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
<li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</a></li>
</ul>
<br>
<h3>Other</h3>
<h4>Options & Events</h4>
<ul>
<li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li>
<li><a href="example-extending-defaults.html">Extending default options</a></li>
<li><a href="example-option-debug.html">Enabling debug mode</a></li>
</ul>
<h4>Metadata - setting inline options</h4>
<ul>
<li>*Note* As of version 2.0.11, you can use class names instead of meta data (<a href="example-parsers-class-name.html">demo</a>)</li>
<li><a href="example-meta-sort-list.html">Set a initial sorting order using metadata</a></li>
<li><a href="example-meta-headers.html">Disable header using metadata</a></li>
<li><a href="example-meta-parsers.html">Setting column parser using metadata</a></li>
</ul>
</div>
<br class="clear">
<a name="Configuration"></a>
<h1>Configuration</h1>
<p class="tip">
tablesorter has many options you can pass in at initialization to achieve different effects<br>
<em>TIP!</em> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all)
</p>
<table id="options" class="tablesorter" border="0" cellpadding="0">
<thead>
<tr>
<th class="property">Property</th>
<th class="type">Type</th>
<th class="defaults">Default</th>
<th class="descrip">Description</th>
<th class="examples">Link</th>
</tr>
</thead>
<tbody>
<tr id="cancelselection">
<td>cancelSelection</td>
<td>Boolean</td>
<td>true</td>
<td>Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.</td>
<td></td>
</tr>
<tr id="cssasc">
<td><a href="#" class="toggle2">cssAsc</a></td>
<td>String</td>
<td>"headerSortUp"</td>
<td>The CSS style used to style the header when sorting ascending. Example from the blue skin:
<div class="collapsible">
<pre class="css">th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;
}</pre></div>
</td>
<td></td>
</tr>
<tr id="csschildrow">
<td><a class="toggle" href="#">cssChildRow</a></td>
<td>String</td>
<td>"expand-child"</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row.</td>
<td>Ex:<a href="example-child-rows.html">1</a> <a href="example-child-rows-filtered.html">2</a></td>
</tr>
<tr class="expand-child">
<td></td>
<td></td>
<td></td>
<td>This is an entirely new row, but attached to the row above while sorting<br>
cssChildRow Example HTML:
<pre class="html">
<table width="100%" border="1">
<thead>
<tr>
<th>Item #</th>
<th>Name</th>
<th>Available</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>Toy Car</td>
<td>5</td>
</tr>
<tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately -->
<td colspan="3">
It's a toy car!
</td>
</tr>
<tr>
<td>23456</td>
<td>Toy Plane</td>
<td>2</td>
</tr>
<tr class="expand-child"> <!-- this row will remain attached to the above row, and not sort separately -->
<td colspan="3">
It's a toy plane!
</td>
</tr>
<tr class="expand-child"> <!-- this row will remain attached to the above two rows, and not sort separately -->
<td colspan="3">
and it flies!
</td>
</tr>
</tbody>
</table>
</pre>
</td>
<td></td>
</tr>
<tr id="cssdesc">
<td><a href="#" class="toggle2">cssDesc</a></td>
<td>String</td>
<td>"headerSortDown"</td>
<td>The CSS style used to style the header when sorting descending. Example from the blue skin:
<div class="collapsible">
<pre class="css">th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;
}</pre></div>
</td>
<td></td>
</tr>
<tr id="cssheader">
<td><a href="#" class="toggle2">cssHeader</a></td>
<td>String</td>
<td>"header"</td>
<td>The CSS style used to style the header in its unsorted state. Example from the blue skin:
<div class="collapsible">
<pre class="css">th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}</pre></div>
</td>
<td></td>
</tr>
<tr id="dateformat">
<td><a href="#" class="toggle2">dateFormat</a></td>
<td>String</td>
<td>"mmddyyyy"</td>
<td>Set the date format. Here are the available options. <span class="tip"><em>Modified</em></span> in version 2.0.23.
<div class="collapsible">
<ul>
<li><code class="hilight">"mmddyyyy"</code> (default)</li>
<li><code class="hilight">"ddmmyyyy"</code></li>
<li><code class="hilight">"yyyymmdd"</code></li>
</ul>
In previous versions, this option was set as "us", "uk" or "dd/mm/yy". This option was modified to better fit needed date formats. It will only work with four digit years!<br>
<br>
The sorter should be set to "shortDate" and the date format can be set in the "dateFormat" option or set for a specific columns within the "headers" option.
See <a href="example-option-date-format.html">the demo page</a> to see it working.
<pre class="js">$(function(){
$("table").tablesorter({
dateFormat : "mmddyyyy", // default date format
// or to change the format for specific columns,
// add the dateFormat to the headers option:
headers: {
0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // year first format
}
});
});</pre>
</div>
</td>
<td><a href="example-option-date-format.html">Example</a></td>
</tr>
<tr id="debug">
<td>debug</td>
<td>Boolean</td>
<td>false</td>
<td>
Boolean flag indicating if tablesorter should display debuging information usefull for development.
</td>
<td><a href="example-option-debug.html">Example</a></td>
</tr>
<tr id="headerlist">
<td>headerList</td>
<td>Array</td>
<td>[] (empty array)</td>
<td>Internal list of each header element as selected using jQuery selectors in the <a href="#selectorheaders"><code class="hilight">selectorHeaders</code></a> option. Not really useful for normal usage.</td>
<td></td>
</tr>
<tr id="headers">
<td><a href="#" class="toggle2">headers</a></td>
<td>Object</td>
<td>null</td>
<td>
An object of instructions for per-column controls in the format: <code class="hilight">headers: { 0: { option: setting }, ... }</code>
<div class="collapsible">
<br>
For example, to disable sorting on the first two columns of a table: <code class="hilight">headers: { 0: { sorter: false}, 1: {sorter: false} }</code>.<br>
<br>
The plugin attempts to detect the type of data that is contained in a column, but if it can't figure it out then it defaults to alphanumeric. You can easily override this by setting the header argument (or column parser).
See the full list of <a href="#parsers">default parsers</a> here or <a href="example-parsers.html">write your own</a>.
<pre class="js">$(function(){
$("table").tablesorter({
headers: {
// See example - Disable first column
0: { sorter: false },
// See example 2: Sort column numerically & treat any text as if its value is:
1: { sorter: "digit" }, // zero
2: { sorter: "digit", string: "max+" }, // maximum positive value
3: { sorter: "digit", string: "max-" }, // maximum negative value
// Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
4: { sorter: "shortDate" },
// See example 3: lock the sort order
// this option will not work if added as metadata
5: { lockedOrder: "asc" },
// See Example 4: Initial sort order direction of seventh column
6: { sortInitialOrder: "desc" },
// Set the filter to false to disable the filter widget in this column
// See the "Applying the filter widget" demo
7: { filter: false }
}
});
});</pre></div>
</td>
<td>
Ex:<a href="example-options-headers.html">1</a>
<a href="example-options-headers-digits-strings.html">2</a>
<a href="example-options-headers-locked.html">3</a>
<a href="example-options-headers-order.html">4</a>
</td>
</tr>
<tr id="onrenderheader">
<td><a href="#" class="toggle2">onRenderHeader</a></td>
<td>Function</td>
<td>null</td>
<td>
This function is called when classes are added to the TH tags. You can use this to modify the HTML in each header tag for additional styling.
<div class="collapsible">
<br>
In versions 2.0.6+, all TH text is wrapped in a span by default. In the example below, the header cell (TH) span is given a class name (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">source</a>).
<pre class="js">$(function(){
$("table").tablesorter({
onRenderHeader: function (){
$(this).find('span').addClass('roundedCorners');
}
});
});</pre>and you'll end up with this HTML (only the thead is shown)<pre class="html"><thead>
<tr>
<th class="header"><span class="roundedCorners">Column 1</span></th>
<th class="header"><span class="roundedCorners">Column 2</span></th>
</tr>
</thead></pre></div>
</td>
<td><a href="example-option-render-header.html">Example</a></td>
</tr>
<tr id="parsers">
<td><a href="#" class="toggle2">parsers</a></td>
<td>Object</td>
<td>{}</td>
<td>Internal list of all of the parsers. Here is a complete list of default parsers:
<div class="collapsible">
<br>
<table class="info"><tbody>
<tr><th><code class="hilight">sorter: false</code></th><td>disable sort for this column.</td></tr>
<tr><th><code class="hilight">sorter: "text"</code></th><td>Sort alpha-numerically.</td></tr>
<tr><th><code class="hilight">sorter: "digit"</code></th><td>Sort numerically.</td></tr>
<tr><th><code class="hilight">sorter: "currency"</code></th><td>Sort by currency value (supports "£$€").</td></tr>
<tr><th><code class="hilight">sorter: "ipAddress"</code></th><td>Sort by IP Address.</td></tr>
<tr><th><code class="hilight">sorter: "url"</code></th><td>Sort by url.</td></tr>
<tr><th><code class="hilight">sorter: "isoDate"</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD).</td></tr>
<tr><th><code class="hilight">sorter: "percent"</code></th><td>Sort by percent.</td></tr>
<tr><th><code class="hilight">sorter: "usLongDate"</code></th><td>Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM).</td></tr>
<tr><th><code class="hilight">sorter: "shortDate"</code></th><td>Sort by a shorten date (see <a href="#dateformat"><code class="hilight">"dateFormat"</code></a>).</td></tr>
<tr><th><code class="hilight">sorter: "time"</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
<tr><th><code class="hilight">sorter: "metadata"</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
</tbody></table><br>
Check out the <a href="#headers"><code class="hilight">headers</code></a> option to see how to use these parsers in your table (example #1).<br>Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3) <span class="tip"><em>New!</em></span>.
</div>
</td>
<td>
Ex:<a href="example-options-headers-digits-strings.html">1</a>
<a href="example-parsers-class-name.html">2</a>
<a href="example-parsers.html">3</a>
</td>
</tr>
<tr id="selectorheaders">
<td>selectorHeaders</td>
<td>String</td>
<td>"thead th"</td>
<td>jQuery selectors used to find the header cells. You can change this, but the table will still need the required thead and tbody before this plugin will work properly.</td>
<td></td>
</tr>
<tr id="sortforce">
<td><a href="#" class="toggle2">sortForce</a></td>
<td>Array</td>
<td>null</td>
<td>Use to add an additional forced sort that is <strong>prepended</strong> to <code class="hilight">sortList</code>.
<div class="collapsible">
<br>
For example, <code class="hilight">sortForce: [[0,0]]</code> will sort the first column in ascending order. After the forced sort, the user selected column(s), or during initialzation, the sorting order defined in the sortList will follow. And lastly, the sort defined in the <a href="#sortappend"><code class="hilight">sortAppend</code></a> option will be applied. More explicitly:<br>
<br>
There are three options to determine the sort order and this is the order of priority:
<ol>
<li><a href="#sortforce"><code class="hilight">sortForce</code></a> forces the user to have this/these column(s) sorted first (null by default).</li>
<li><a href="#sortlist"><code class="hilight">SortList</code></a> is the initial sort order of the columns.</li>
<li><a href="#sortappend"><code class="hilight">SortAppend</code></a> is the default sort that is added to the end of the users sort selection (null by default).</li>
</ol>
The value of these sort options is an array of arrays and can include one or more columns. The format is an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where <code class="hilight">columnIndex</code> is a zero-based index for your columns left-to-right and <code class="hilight">sortDirection</code> is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>.
<pre class="js">$(function(){
$("table").tablesorter({
sortForce : [[0,0]], // Always sort first column first
sortList : [[1,0], [2,0]], // initial sort columns (2nd and 3rd)
sortAppend : [[3,0]] // Always add this sort on the end (4th column)
});
});</pre></td>
</td>
<td><a href="example-option-sort-force.html">Example</a></td>
</tr>
<tr id="sortlist">
<td><a href="#" class="toggle2">sortList</a></td>
<td>Array</td>
<td>null</td>
<td>Use to add an initial sort to the table.
<div class="collapsible">
<br>
The value contains an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>. Please see <a href="#sortforce"><code class="hilight">sortForce</code></a> for more details on other sort order options.
</div>
</td>
<td><a href="example-option-sort-list.html">Example</a></td>
</tr>
<tr id="sortappend">
<td><a href="#" class="toggle2">sortAppend</a></td>
<td>Array</td>
<td>null</td>
<td>Use to add an additional forced sort that will be appended to the dynamic selections by the user.
<div class="collapsible">
<br>
For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.<br>
<br>
The value contains an array of instructions for per-column sorting and direction in the format: <code class="hilight">[[columnIndex, sortDirection], ... ]</code> where <code class="hilight">columnIndex</code> is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: <code class="hilight">[[0,0],[1,0]]</code>. Please see <a href="#sortforce"><code class="hilight">sortForce</code></a> for more details on other sort order options.
</div>
</td>
<td><a href="example-option-sort-append.html">Example</a></td>
</tr>
<tr id="sortinitialorder">
<td>sortInitialOrder</td>
<td>String</td>
<td>"asc"</td>
<td>
When clicking the header for the first time, the direction it sorts. Valid arguments are <code class="hilight">"asc"</code> for Ascending or <code class="hilight">"desc"</code> for Descending.<br>
<span class="tip"><em>New!</em></span> in v2.0.8: This order can also be set by desired column using the <a href="#headers"><code class="hilight">headers</code></a> option.
</td>
<td>Ex:<a href="example-option-sort-order.html">1</a> <a href="example-options-headers-order.html">2</a></td>
</tr>
<tr id="sortlocalecompare">
<td>sortLocaleCompare</td>
<td>Boolean</td>
<td>false</td>
<td>
Boolean flag indicating whenever to use javascript <code class="hilight">String.localeCampare</code> method or not. This is only used when comparing text strings.<br>
In Tablesorter version 2.0.6+, the default sort was replaced with an alpha-numeric sort. To over-ride this behaviour, set this <code class="hilight">sortLocaleCompare</code> to <code class="hilight">true</code>.
</td>
<td></td>
</tr>
<tr id="sortmultisortkey">
<td>sortMultiSortKey</td>
<td>String</td>
<td>"shiftKey"</td>
<td>The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are <code class="hilight">"ctrlKey"</code> or <code class="hilight">"altKey"</code>. <br>Reference: <a class="external" href="http://developer.mozilla.org/en/docs/DOM:event#Properties">http://developer.mozilla.org/en/docs/DOM:event#Properties</a></td>
<td><a href="example-option-sort-key.html">Example</a></td>
</tr>
<tr id="tableClass">
<td>tableClass</td>
<td>String</td>
<td>"tablesorter"</td>
<td>This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.
<div class="collapsible">
<br>Change this option if you are not using the default css, or if you are using a completely custom stylesheet.
</div>
</td>
<td></td>
</tr>
<tr id="textextraction">
<td><a href="#" class="toggle2">textExtraction</a></td>
<td>String Or Function</td>
<td>"simple"</td>
<td>Defines which method is used to extract data from a table cell for sorting.
Built-in options include <code class="hilight">"simple"</code> and <code class="hilight">"complex"</code>. Use complex if you have data marked up
inside of a table cell like: <code class="hilight"><td><strong><em>123 Main Street</em></strong></td></code>.
<div class="collapsible">
<br>
Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:
<pre class="js">var myTextExtraction = function(node){
// extract data from markup and return it
// originally: return node.childNodes[0].childNodes[0].innerHTML;
return $(node).text();
}
$(function(){
$("#myTable").tableSorter( { textExtraction: myTextExtraction } );
});</pre>
tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples. Updated to a jQuery example by Rob G (Mottie).<br>
<br>
Now if the text you are finding in the script above is say a number, then just include the <a href="#headers"><code class="hilight">headers</code></a> sorter option to specify how to sort it. Also in this example, we will specify that the special textExtraction code is only needed for the second column ("1" because we are using a zero-based index). All other columns will ignore this textExtraction function.
<pre class="js">$(function(){
$("table").tablesorter({
textExtraction: {
1: function(node) {
return $(node).find("span:last").text();
}
},
headers: {
1: { sorter : "digit" }
}
});
});</pre></div>
</td>
<td><a href="example-option-text-extraction.html">Example</a></td>
</tr>
<tr id="widgets">
<td>widgets</td>
<td>Array</td>
<td>[] (empty array)</td>
<td>
Initialize widgets using this option ( e.g. <code class="hilight">widgets : ['zebra']</code>, or custom widgets <code class="hilight">widgets: ['zebra', 'myCustomWidget'];</code>, see <a href="example-widgets.html">this demo</a> on how to write your own custom widget ).
</td>
<td><a href="example-widget-zebra.html">Example</a></td>
</tr>
<tr id="widgetzebra">
<td><a href="#" class="toggle2">widgetZebra</a></td>
<td>Object with Array</td>
<td>{ css: [ "even", "odd" ] }</td>
<td>
When the zebra striping widget is initialized, it automatically applied the default class names of <code class="hilight">"even"</code> and <code class="hilight">"odd"</code>.
<div class="collapsible">
<br>
Use the <a href="#widgetzebra"><code class="hilight">"widgetZebra"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
widgets: ["zebra"], // initialize zebra striping of the table
widgetZebra: { css: [ "normal-row", "alt-row" ] }
});
});</pre></div>
</td>
<td><a href="example-widget-zebra.html">Example</a></td>
</tr>
<tr id="widgetcolumns">
<td><a href="#" class="toggle2">widgetColumns</a></td>
<td>Object with Array</td>
<td>{ css:[ "primary", "secondary", "tertiary" ] }</td>
<td>
When the column styling widget is initialized, it automatically applied the default class names of <code class="hilight">"primary"</code> for the primary sort, <code class="hilight">"secondary"</code> for the next sort, <code class="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... <span class="tip"><em>New!</em></span> in v2.0.17.
<div class="collapsible">
<br>
Use the <a href="#widgetcolumns"><code class="hilight">"widgetColumns"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
widgets: ["columns"], // initialize column styling of the table
widgetColumns: { css: ["primary", "secondary", "tertiary" ] }
});
});</pre></div>
</td>
<td><a href="example-widget-columns.html">Example</a></td>
</tr>
<tr id="widgetuitheme">
<td><a href="#" class="toggle2">widgetUitheme</a></td>
<td>Object with Array</td>
<td>{ css: [ "ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n" ] }</td>
<td>
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <code class="hilight">"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code class="hilight">"ui-icon-arrowthick-1-s"</code> for the descending sort and <code class="hilight">"ui-icon-arrowthick-1-n"</code> for the ascending sort. <span class="tip"><em>New!</em></span> in v2.0.9.
<div class="collapsible">
<br>
Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
<br>
Use the <a href="#widgetuitheme"><code class="hilight">"widgetUitheme"</code></a> option to change the css class name as follows:
<pre class="js">$(function(){
$("table").tablesorter({
widgets: ["uitheme"], // initialize ui theme styling widget of the table
widgetUitheme: {
css: [
"ui-icon-carat-2-n-s", // Unsorted icon
"ui-icon-carat-1-s", // Sort up (down arrow)
"ui-icon-carat-1-n" // Sort down (up arrow)
]
}
});
});</pre></div>
</td>
<td><a href="example-widget-columns.html">Example</a></td>
</tr>
<tr id="widthfixed">
<td>widthFixed</td>
<td>Boolean</td>
<td>false</td>
<td>Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion.
<br><del>Requires the <a href="#Download-Addons">jQuery dimension plugin</a> to work.</del> This is now part of the jQuery core.</a></td>
<td><a href="example-pager.html">Example</a></td>
</tr>
</tbody>
</table>
<a name="Methods"></a>
<h1>Methods</h1>
<p class="tip">
tablesorter has some methods available to allow updating, resorting or applying widgets to a table after it has been initialized.
<br>
<em>TIP!</em> Click on the link in the method column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all):
</p>
<table id="methods" class="tablesorter" border="0" cellpadding="0">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr id="addrows">
<td><a href="#" class="toggle2">addRows</a></td>
<td>Use this method to add table rows. <span class="tip"><em>New!</em> in v2.0.16</span>
<div class="collapsible">
It does not work the same as "update" in that it only adds rows, it does not remove them.<br>
Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist.
<pre class="js">// Add multiple rows to the table
var row = '<tr><td>Inigo</td><td>Montoya</td><td>34</td>' +
'<td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
$row = $(row);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);</pre></div>
</td>
<td><a href="example-add-rows.html">Example</a></td>
</tr>
<tr id="sorton">
<td><a href="#" class="toggle2">sorton</a></td>
<td>Use this method to sort an initialized table in the desired order.
<div class="collapsible">
<pre class="js">// Choose a new sort order
var sort = [[0,0],[2,0]];
// Note that the sort value below is inside of another array (inside another set of square brackets)
$("table").trigger("sorton", [sort]);</pre></div>
</td>
<td><a href="example-trigger-sort.html">Example</a></td>
</tr>
<tr id="update">
<td><a href="#" class="toggle2">update</a></td>
<td>Update the stored tablesorter data and the table.
<div class="collapsible">
<pre class="js">// Add new content
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// As of version 2.0.14, the table will automatically resort (using the current sort selection)
// after the update, so include the following if you want to specify a different sort
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
$("table").trigger("sorton", [sorting]);</pre></div>
</td>
<td><a href="example-ajax.html">Example</a></td>
</tr>
<tr id="appendcache">
<td><a href="#" class="toggle2">appendCache</a></td>
<td>Update a table that has had its data dynamically changed; used in conjunction with "update".<br>
<div class="collapsible">
Use this method when more than just one cell like in the "updateCell" method, but you may possibly have to trigger two events: both "update" and "appendCache".<br>
<br>
Note: This is the only method the pager widget uses - the entire table is stored in the cache, but only the visible portion is actually exists in the table.
<pre class="js">// Table data was just dynamically changed (more than one cell)
$(table)
.trigger("update")
.trigger("appendCache");</pre></div>
</td>
<td></td>
</tr>
<tr id="updatecell">
<td><a href="#" class="toggle2">updateCell</a></td>
<td>Update a table cell in the tablesorter data.
<div class="collapsible">
<pre class="js">$(function() {
$("table").tablesorter();
$("td.discount").click(function(){
// randomize a number
var discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' +
('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);
$(this).text(discount);
// update the table, so the tablesorter plugin knows its value
$("table").trigger("updateCell",[this]);
// As of version 2.0.14, the table will automatically resort (using the current sort selection)
// after the update, so include the following if you want to specify a different sort
// set sorting column and direction, this will sort on the first and third column
var sorting = [[3,1]];
$("table").trigger("sorton",[sorting]);
return false;
});
});</pre></div>
</td>
<td><a href="example-update-cell.html">Example</a></td>
</tr>