Wie verwende ich die Tablesorter-Tabellensortierungskomponente in JQuery?

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

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>

Zusätzliche Erklärung:

$(document).ready(function(){ 
//第一列不进行排序(索引从0开始) 
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
});

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

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

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!