Ausführliche Erklärung der Verwendung des Tablesorter-Plug-Ins (mit Hülle)

Dieses Mal werde ich Ihnen die Verwendung des Tablesorter-Plugins ausführlich erklären (mit Fällen). Hier sind die tatsächlichen Fälle Schauen Sie mal rein. 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
, muss den Kopf und enthalten tbody-Tags

<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. Tabelle so einstellen, dass sie sortierbar ist

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

Offizielles Dokument: http://tablesorter.com/docs/

Zusätzliche Erklärung:

Bei der Verwendung ist ein Problem aufgetreten , Meine Tabellendaten werden über Ajax abgerufen. Beim Sortieren der Startseite werden die Daten auf der vorherigen Seite erneut angezeigt. Sie können dieses Problem anschließend lösen Sie erhalten die Daten über Ajax.
Um das „Update“-Ereignis auszulösen, lautet der Code wie folgt:

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

Das oben genannte Problem bereitet mir seit langem Kopfzerbrechen auf der offiziellen Website und stellte fest, dass dies 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
Ich weiß nicht, was die anderen sind.

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:

jQuery domänenübergreifender Iframe-Schnittstellenaufruf (mit Code)

jQuery ruft den IFrame und seinen ab übergeordnetes Fensterobjekt und verwenden Sie

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung des Tablesorter-Plug-Ins (mit Hülle). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!