2013-03-30 19 views
7

Sono nuovo di Jquery e sto cercando di utilizzare il plug-in Jquery Tablesorter e l'ho testato in un semplice file html come di seguito, ma non funziona. Tutto quello che ho visto nel browser è solo una tabella semplice senza ordinamento, nessuna intestazione cliccabile, non sembra quello che ho visto sulla home page di Jquery Tablesorter. Non so cosa c'è di sbagliato con il mio html. Ho inserito 2 file jQuery nella stessa cartella con questo file html. Si prega di avvisare!Jquery Tablesorter non funziona! Cosa c'è che non va?

<html> 
<head> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
    { 
     $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
    } 
); 
</script> 
</head> 
<body> 
<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>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 
+0

Non c'è un file css da includere anche? – leppie

+0

Vorrei anche controllare la console del tuo browser e assicurarmi che i file vengano caricati (per sicurezza) – bruchowski

+0

@leppie Sì, ho incluso il tema predefinito css – TwentyLe

risposta

9

Ecco il collegamento di lavoro violino. Hai dimenticato di aggiungere tablesorter js e tablesorter css che ho aggiunto in risorse esterne in jsfiddle. Puoi verificarlo.

http://jsfiddle.net/BKgue/2/

+0

Ok, ho capito, risolto e ora funziona :). Grazie signore e grazie COSÌ! – TwentyLe

+0

Dov'è la documentazione in cui si afferma che è necessario avere i file css di tablesorter js e tablesorter? – DDDD

+3

Sì, ho letto tutta la documentazione, non c'è alcun riferimento a TUTTO su come aggiungere tablesorter.css perché funzioni. non ha alcun senso per me. –

1

Avviso <th> all'interno <tr> invece di <td> questo era ciò che ha impedito di lavorare per me.

<thead> 
    <tr> 
     <th>column 1</th> 
    <tr> 
</thead> 

Anche il css non è necessario affinché il tablesorter funzioni. Se vuoi mantenere la tua formazione ma vuoi mostrare le piccole frecce, hai solo bisogno del seguente codice. e copia incolla la 3 gif freccia fornita da tablesorter nella stessa cartella del file css. o le tue frecce personali se vuoi.

table.tablesorter thead tr .header { 
    background-image: url(bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 
table.tablesorter thead tr .headerSortUp { 
    background-image: url(asc.gif); 
} 
table.tablesorter thead tr .headerSortDown { 
    background-image: url(desc.gif); 
} 
Problemi correlati