2013-03-30 16 views
7

Jestem nowy w Jquery i próbuję użyć wtyczki Jquery Tablesorter i przetestowałem ją w prostym pliku html jak poniżej, ale nie działa. Wszystko, co widziałem w przeglądarce to tylko zwykły stół bez sortowania, żaden klikalny nagłówek, to nie wygląda tak, jak widziałem na stronie głównej Jquery Tablesorter. Nie wiem, co jest nie tak z moim html. Umieściłem 2 pliki jquery w tym samym folderze z tym plikiem html. Proszę doradź!Jquery Tablesorter nie działa! Co z tym jest nie tak?

<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

Czy nie ma również pliku CSS? – leppie

+0

Chciałbym również sprawdzić konsolę przeglądarki i upewnić się, że te pliki ładują się (po prostu, aby się upewnić). – bruchowski

+0

@leppie Tak, dołączam domyślny motyw css – TwentyLe

Odpowiedz

9

Oto działający link fiddle. Zapomniałeś dodać tablesorter js i tablesorter css, które dodałem w zewnętrznych zasobach w jsfiddle. Możesz to sprawdzić.

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

+0

Dobra, zrozumiałem, naprawiłem i teraz zadziałało :). Dziękuję, proszę pana i dzięki! – TwentyLe

+0

Gdzie znajduje się dokumentacja, która stwierdza, że ​​musisz mieć pliki tabor js i tablesorter css? – DDDD

+3

Tak, czytałem całą dokumentację, w ogóle nie ma odniesienia do konieczności dodawania tablesorter.css, aby działał. w ogóle nie ma dla mnie sensu. –

1

Wskazówka <th> wewnątrz <tr> zamiast <td> to było to, co uniemożliwiło jej pracę dla mnie.

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

Również css nie jest potrzebny, aby tablesorter działał. Jeśli chcesz zachować własne formowanie, ale chcesz pokazać małe strzałki, potrzebujesz następującego kodu. i skopiuj wklej 3 gif strzałki dostarczony przez tablesorter do tego samego folderu co plik css. lub własne gify ze strzałkami, jeśli chcesz.

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