Jquery Plugin - Tablesorter 2

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
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
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;

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, Addons, 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+
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

Jquery Plugin - Tablesorter 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jquery Plugin - Tablesorter 2

Diunggah oleh

Hak Cipta:

Format Tersedia

24/12/11 jQuer plugin: Tablesorter 2.

Anda mungkin juga menyukai