You are on page 1of 5

24/12/11 jQuer plugin: Tablesorter 2.

0
1/5 tablesorter.com/docs/#Download
tablesorter
Documentation
bookmak hi on Delicio
Fleible client-side table sorting
Aho: Chiian Bach
Veion: 2.0.5 (changelog)
Licence: Dal licened nde MIT o GPL licene.
Updae! Ne eion!, and he ableoe doc ae no aailable in ian, head oe o ableoe.
Helping o! If o like ableoe and o'e feeling geneo, ake a look a m Amaon Wih Li o make a donaion.

Commen and loe lee can be en o: chiian@ableoe.com .
Conen
1. Inodcion
2. Demo
3. Geing aed
4. Eample
5. Configaion
6. Donload
7. Compaibili
8. Sppo
9. Cedi
Inodcion
ableoe i a jQe plgin fo ning a andad HTML able ih THEAD and TBODY ag ino a oable able iho page efehe.
ableoe can ccefll pae and o man pe of daa inclding linked daa in a cell. I ha man efl feae inclding:
Mli-colmn oing
Pae fo oing e, URI, inege, cenc, floa, IP addee, dae (ISO, long and ho foma), ime. Add o on eail
Sppo econda "hidden" oing (e.g., mainain alphabeical o hen oing on ohe cieia)
Eenibili ia idge em
Co-boe: IE 6.0+, FF 2+, Safai 2.0+, Opea 9.0+
Small code ie
Demo
Fi Name La Name Age Toal Dicon Diffeence Dae
Bruce Almight 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Bruce Evans 22 $13.19 11% 0 Jan 18, 2007 9:12 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
TIP! So mliple colmn imlaneol b holding don he hif ke and clicking a econd, hid o een foh colmn heade!
Geing aed
To e he ableoe plgin, inclde he jQe liba and he ableoe plgin inide he <head> ag of o HTML docmen:
<script tpe="tet/javascript" src="/path/to/jquer-latest.js"></script>
<script tpe="tet/javascript" src="/path/to/jquer.tablesorter.js"></script>
24/12/11 jQuer plugin: Tablesorter 2.0
2/5 tablesorter.com/docs/#Download
ableoe ok on andad HTML able. Yo m inclde THEAD and TBODY ag:
<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>
<tbod>
<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>
</tbod>
</table>

Sa b elling ableoe o o o able hen he docmen i loaded:
$(document).ready(function()
{
$("#myTable").tablesorter();

);

Click on he heade and o'll ee ha o able i no oable! Yo can alo pa in configaion opion hen o iniialie he able. Thi
ell ableoe o o on he fi and econd colmn in acending ode.
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]] );

);

NOE! ableoe ill ao-deec mo daa pe inclding nmbe, dae, ip-adee fo moe infomaion ee Eample
Eample
Thee eample ill ho ha' poible ih ableoe. Yo need Jaacip enabled o n hee ample, j like o and o e ill
24/12/11 jQuer plugin: Tablesorter 2.0
3/5 tablesorter.com/docs/#Download
Thee eample ill ho ha' poible ih ableoe. Yo need Jaacip enabled o n hee ample, j like o and o e ill
need Jaacip enabled o e ableoe.
Baic
Se a iniial oing ode ing opion
Dealing ih digi!
Diable heade ing opion
So able ing a link oide he able
Foce a defal oing ode
Change he defal mli-oing ke
Meadaa - eing inline opion
Se a iniial oing ode ing meadaa
Diable heade ing meadaa
Seing colmn pae ing meadaa
Adanced
Tigge oEnd and oSa(Diplaing oing poge)
Appending able daa ih aja
Iniialiing ableoe on a emp able
Dealing ih makp inide cell
Eending defal opion
Enableing debg mode
Pae, iing o on
Widge, iing o on
Companion plgin
Page plgin
Configaion
ableoe ha man opion o can pa in a iniialiaion o achiee diffeen effec:
Propert Tpe Default Description Link
cancelSelecion Boolean e Indicae if ableoe hold diable elecion of e in he able heade (TH). Make heade
behae moe like a bon.
cAc Sing "headeSoUp" The CSS le ed o le he heade hen oing acending. Eample fom he ble kin:
th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;

cDec Sing "headeSoDon" The CSS le ed o le he heade hen oing decending. Eample fom he ble kin:
th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;

cHeade Sing "heade" The CSS le ed o le he heade in i noed ae. Eample fom he ble kin:
th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-eight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;

24/12/11 jQuer plugin: Tablesorter 2.0
4/5 tablesorter.com/docs/#Download
B B
.
E
O A - : headers: { 0: { option:
setting , ... F , :
headers: { 0: { sorter: false, 1: {sorter: false
E
F A U
. F , -
. I
.
E
L A A - : [[columnIndex,
sortDirection], ... ] I - --
D 0 A 1 D. A
1 2 : [[0,0],[1,0]]
E
MSK S K T - . D
. O K, K.
R: ://..///DOM:#P
E
E S
O
F
D . B-
"" "". U
: <td><strong><em>123 Main Street</em></strong></td>. C
"TE"
:
ar myTextExtraction = fncion(node)
{
// extract data from markup and return it
rern node.childNodes[0].childNodes[0].innerHTML;

$(document).ready(fncion()
{
$("#myTable").tableSorter( {textExtraction: myTextExtraction );

);
Q
. T J N .
E
F B I . T
P . R Q .
E
0ownload
FuII reIease · PlugIn, 0ocumentatIon, Add·ons, Themes jquery.tablesorter.zIp
PIck n choose · Place at least the requIred fIles In a dIrectory on your webserver that Is accessIble to a web browser. Fecord thIs locatIon.
PequIred:
jQuery (1.2.1 or hIgher)
jquery.tablesorter.mIn.js (12kb, |InIfIed for productIon · please put the fIle on your server)
DptIonaIlAdd-Dns:
jQuery |etadata 2.1 (J,7kb PequIred for settIng InIIne optIons)
jquery.tablesorter.js (17,7kb, for development)
jquery.tablesorter.pager.js (J,6kb, tablesorter pagInatIon plugIn)
Themes:
Creen SkIn · Ìmages and CSS styles for green themed headers
8lue SkIn · Ìmages and CSS styles for blue themed headers (as seen In the examples)
8rowser CompatIbIlIty
tablesorter has been tested successfully In the followIng browsers wIth JavascrIpt enabled:
FIrefox 2+
Ìnternet Explorer 6+
24/12/11 jQuer plugin: Tablesorter 2.0
5/5 tablesorter.com/docs/#Download
Ìnternet Explorer 6+
SafarI 2+
Dpera 9+
Konqueror
jQuery 8rowser CompatIbIlIty
Support
Support Is avaIlable through the jQuery |aIlIng LIst .
Access to the jQuery |aIlIng LIst Is also avaIlable through Nabble Forums .
CredIts
WrItten by ChrIstIan 8ach .
0ocumentatIon wrItten by 8rIan ChIdInellI , based on |Ike Alsup's great documentIon.
John FesIg for the fantastIc jQuery

24/12/11 able o e o k on anda d HTML able . j like o and o e ill 2/5 .o<t> <t> /r <r t> <dCna<t> t>owy/d <dTm/d t>i<t> <dtowyerhiknt/d t>cna@atln. Thi NO E! able o e ill a o-de ec mo da a pe incl ding n mbe .ed(ucin) { $"mTbe)tbeotr {otit [00.0/d t>100<t> <dht:/w.ed(ucin) { $"mTbe)tbeotr) (#yal". ip-ad e e fo mo e info ma ion ee E ample E ample The e e ample ill ho tablesorter.icna.o<t> t>dehtalcm/d <d$0. ) . in config a ion op ion hen o ini iali e he able.sihcm/d t>tp/wwjmt.0/d <dht:/w.rn. da e .[.0/d <dht:/w.alsre( srLs: [.o<t> t>tp/wwfakcm/d <t> /r <r t> <dDe/d t>o<t> <dJsn/d t>ao<t> <djo@omi. ) .] 10] .com/docs/#Download ha ' po ible i h able o e . Yo m jQuer plugin: Tablesorter 2. $dcmn)rayfnto( (ouet. Click on he heade and o 'll ee ha o able i no o able! Yo can al o pa ell able o e o o on he fi and econd col mn in a cending o de .o<t> <t> /r <r t> <dBc<t> t>ah/d <dFak/d t>rn<t> <dfahyhocm/d t>bc@ao.decm/d t>tp/wwjo.0/d <dht:/w.o<t> t>tp/wwtmowycm/d <t> /r <to > /bd <tbe /al> S a b elling able o e o o o able hen he doc men i loaded: $dcmn)rayfnto( (ouet.e<t> <d$00<t> t>5.0 incl de THEAD and TBODY ag : <al i=mTbe cas"alsre" tbe d"yal" ls=tbeotr> <ha> ted <r t> <hLs Nm<t> t>at ae/h <hFrtNm<t> t>is ae/h <hEal/h t>mi<t> <hDe/h t>u<t> <hWbSt<t> t>e ie/h <t> /r <ted /ha> <bd> to <r t> <dSih/d t>mt<t> <dJh<t> t>on/d <djmt@mi.] ) (#yal".o<t> <d$00<t> t>5.alsre(.o<t> t>sihgalcm/d <d$00<t> t>5. Yo need Ja a c ip enabled o n he e ample .

bcgon-oo:#39F akrudclr 39F. mri-et -p. E ample f om he bl e kin: t.igsalgf. i ing o o n Companion pl gin Page pl gin Config a ion able o e ha man op ion Propert cancelSelec ion c A c T pe Boolean S ing o can pa Default e "heade So Up" in a ini iali a ion o achie e diffe en effec : Description Indica e if able o e ho ld di able elec ion of e beha e mo e like a b on. adn-et 0x bre-ih:1xsld#a97 odrrgt p oi ddc. The CSS le ed o le he heade in he able heade (TH). ot ih: od bcgon-eet n-eet akrudrpa: orpa.i) akrudiae r(.igsalds. Ba ic Se a ini ial o ing o de ing op ion Dealing i h digi ! Di able heade ing op ion So able ing a link o ide he able Fo ce a defa l o ing o de Change he defa l m l i./m/ml_s. agnlf: 1x tablesorter. bcgon-oiin cne lf. i ing o o n Widge .i) akrudiae r(. E ample f om he bl e kin: t.igsalacgf.i) bcgon-oo:#39F akrudclr 39F.edrotp{ hhaeSrU bcgon-mg:ul. cro:pitr usr one. akrudpsto: etr et pdiglf:2p./m/ml_ecgf. c Heade S ing "heade " The CSS le ed o le he heade in i n o ed a e.24/12/11 jQuer plugin: Tablesorter 2. E ample f om he bl e kin: t. Make heade Link hen o ing a cending.o ing ke Me ada a .edr{ hhae bcgon-mg:ul.e ing inline op ion Se a ini ial o ing o de ing me ada a Di able heade ing me ada a Se ing col mn pa e ing me ada a Ad anced T igge o End and o S a (Di pla ing o ing p og e ) Appending able da a i h aja Ini iali ing able o e on a emp able Dealing i h ma k p in ide cell E ending defa l op ion Enableing deb g mode Pa e . fn-egt bl.com/docs/#Download 3/5 . j like o and o e ill The e e ample ill ho ha ' po ible i h able o e .edroton{ hhaeSrDw bcgon-mg:ul. Yo need Ja a c ip enabled o need Ja a c ip enabled o e able o e ./m/ml.0 n he e ample . akrudiae r(. c De c S ing "heade So Do n" The CSS le ed o le he heade hen o ing de cending.

.neHM. U . .0 B O B . ( ) B C J F 2+ : I E 6+ tablesorter.. haes {0 {sre:fle. . O i a /Add-O Q .] otieto] .. " T : a mTxEtato =fn innd) r yetxrcin c o(oe { / etatdt fo mru adrtr i / xrc aa rm akp n eun t r r nd. . - E L A A srDrcin. (17.. (3.R Q J N Q .1 .O D 0 1 : [clmIdx [ounne.A . ..D . The e : G B S S -I -I CSS CSS M : 2.2.7 Re i ed f . F etn . . e i gi i e ) i ) ) (1. . .D E M S K S K T R E E S O F D : <d<tog<m13Mi Sre<e>/tog<t> C t>srn>e>2 an tet/m<srn>/d.][. ".I . ) .hlNds0. .R . .24/12/11 jQuer plugin: Tablesorter 2.T F B I P .com/docs/#Download 4/5 ..T .B - E E " $dcmn)rayfn in) (ouet.alSre( txEtato: yetxrcin .] . /DOM: #P D .T . E D F Pic Re e ea e .7 .1 {otr fle edr: : otr as : sre: as E : haes {0 {oto: edr: : pin : E F A U . e n oecidoe[]cidoe[]inrTL .6 .hlNds0. . ) (12 .1 (3. .ed( c o( { $"mTbe)tbeotr {etxrcin mTxEtato ) (#yal". A stig .M ) e-P .P ch i ed: Q .A : [00. I A 1 2 K : " :// " " . / K / .F .10] [.

M A ' .com/docs/#Download 5/5 . tablesorter. N F . C W D J R C B .0 C S S A Q M L Q M L .24/12/11 I S O K Q B E 2+ 9+ 6+ jQuer plugin: Tablesorter 2. B G Q .