Ausführliche Erläuterung der Schritte zur Verwendung der Tabellensortierkomponente Tablesorter

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung des Tabellen--Sortierkomponenten-Tablesorters. Welche Vorsichtsmaßnahmen gibt es für die Verwendung des Tabellensortier-Komponenten-Tablesorters? Ein praktischer Fall.

1. Importieren Sie die Datei

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

Der Effekt ist wie unten gezeigt:

2. Standard-HTML-Tabelle thead- und tbody-Tags einschließen

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

3. Stellen Sie die Tabelle so ein, dass sie sortierbar ist

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

Zusätzliche Erklärung:
Bei der Verwendung ist ein Problem aufgetreten. Meine Tabellendaten werden über Ajax abgerufen . Es gibt kein Problem beim Sortieren der Startseite.
Beim Sortieren der nächsten Seite werden die Daten auf der vorherigen Seite erneut angezeigt. Um dieses Problem zu lösen, können Sie das Ereignis „Update“ auslösen, nachdem Sie die Daten mit Ajax erhalten haben
, der Code lautet wie folgt:

$(".tablesorter").trigger("update");

Das oben genannte Problem hat mich schon lange wirklich gestört. Ich habe gerade angefangen, das Pager-Plugin auf der offiziellen Website zu verwenden, und festgestellt, dass es nicht geeignet ist.
Ich habe die Informationen online überprüft und die folgenden Codes aussortiert:

$(".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 langem Testen habe ich festgestellt, dass nur $(".tablesorter").trigger("update "); kann das Problem lösen. Frage
Ich weiß nicht, was das andere Zeug ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung, wie jQuery Daten in Tabellen verarbeitet

Welche Techniken gibt es für den Betrieb von JQuery-Tabellen? ?

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zur Verwendung der Tabellensortierkomponente Tablesorter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!