Detailed explanation of the steps to implement table sorting using sortElements

This time I will bring you a detailed explanation of the steps for sortElements to implement table sorting. What are the precautions for sortElements to implement table sorting? . The following is a practical case, let's take a look.

jquery.tablesorter, size 17KB, but its homepage has some compatibility issues under ie10.

DataTables, 75KB in size, powerful, with paging, search and other functions.
There is also a plug-in called sortElements, which is very small, only 3KB, has good compatibility, and has 818 stars on Github.
Finally I chose to use sortElements, the implementation is very simple:
1. Introduce jQuery

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

2. Introduce sortElements.js

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

3. js 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. html code

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery implements table sorting real-time search function

jQuery makes circular icon menu rotating switching function

The above is the detailed content of Detailed explanation of the steps to implement table sorting using sortElements. For more information, please follow other related articles on the PHP Chinese website!