Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie verwende ich die Tablesorter-Tabellensortierungskomponente in JQuery?

伊谢尔伦
Freigeben: 2017-07-22 09:33:08
Original
1506 Leute haben es durchsucht

1. Dateien importieren

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<!-- 引入以下样式则表头出现排序图标,同时引入图片 --> 
<link href="css/style.css" rel="stylesheet" type="text/css" >
Nach dem Login kopieren

2. Die Tabelle muss sortierbar sein

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
<th>Name</th> 
<th>Sex</th> 
<th>Address</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>zhangsan</td> 
<td>boy</td> 
<td>beijing</td> 
</tr> 
<tr> 
<td>lisi</td> 
<td>girl</td> 
<td>shanghai</td> 
</tr> 
<tr> 
...略 
</tr> 
</tbody> 
</table>
Nach dem Login kopieren

Zusätzliche Erklärung:

$(document).ready(function(){ 
//第一列不进行排序(索引从0开始) 
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
});
Nach dem Login kopieren
Ein Problem ist bei der Verwendung aufgetreten. Meine Tabellendaten werden über Ajax abgerufen und es gibt kein Problem beim Sortieren der Homepage.

Beim Sortieren der Auf der nächsten Seite werden die Daten auf der vorherigen Seite erneut angezeigt. Um dieses Problem zu lösen, können Sie das Ereignis „Aktualisieren“

auslösen, nachdem Sie die Daten mit Ajax erhalten haben. Der Code lautet wie folgt:



Das oben genannte Problem hat mich schon lange beschäftigt. Ich habe gerade angefangen, das Pager-Plugin auf der offiziellen Website zu verwenden, und festgestellt, dass es nicht geeignet ist.

$(".tablesorter").trigger("update");
Nach dem Login kopieren
Ich habe die Informationen online überprüft und den folgenden Code aussortiert:

Nach langem Testen habe ich festgestellt, dass nur $(".tablesorter").trigger („Update“); dieser Eine Satz kann das Problem lösen

$(".tablesorter tbody tr").addClass("delete"); 
$(".tablesorter tbody tr.delete").remove(); 
$("table tbody").append(html); 
$(".tablesorter").trigger("appendCache"); 
$(".tablesorter").trigger("update"); 
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verwende ich die Tablesorter-Tabellensortierungskomponente in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage