Explication détaillée des étapes pour implémenter le tri des tables à l'aide de sortElements

Cette fois, je vais vous donner une explication détaillée des étapes permettant à sortElements d'implémenter le tri de table. Quelles sont les précautions pour que sortElements implémente le tri de table. Voici un cas pratique, jetons un coup d'oeil.

jquery.tablesorter, taille 17 Ko, mais sa page d'accueil présente quelques problèmes de compatibilité sous IE10.

DataTables, d'une taille de 75 Ko, puissants, avec pagination, recherche et autres fonctions.
Il existe également un plug-in appelé sortElements, qui est très petit, seulement 3 Ko, a une bonne compatibilité et compte 818 étoiles sur Github.
Finalement j'ai choisi d'utiliser sortElements, l'implémentation est très simple :
1. Introduisez jQuery

<script type="text/
javascript
" src="jquery.js"></script>

2. Introduisez sortElements.js

<script type="text/javascript" src="jquery.sortElements.js"></script>

3. code

$(document).ready(function(){ 
var table = $('#mytable');//table的id 
$('#sort_header')//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find('td').filter(function(){ 
return $(this).index() === thIndex; 
}).sortElements(function(a, b){ 
return $.text([a]) > $.text([b]) ? 
inverse ? -1 : 1 
: inverse ? 1 : -1; 
}, function(){ 
return this.parentNode; 
}); 
inverse = !inverse; 
}); 
}); 
});

4. code html

<table id="mytable"> 
<tr> 
<th id="sort_header">Facility name</th> 
<th>Phone #</th> 
<th id="city_header">City</th> 
<th>Speciality</th> 
</tr> 
<tr> 
<td>CCC</td> 
<td>00001111</td> 
<td>Amsterdam</td> 
<td>GGG</td> 
</tr> 
</table>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

jquery implémente le tri des tableaux + la fonction de recherche en temps réel

jQuery permet de changer de rotation de menu avec des icônes circulaires Fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!