Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the steps to implement table sorting using sortElements

php中世界最好的语言
Release: 2018-04-26 09:23:16
Original
1839 people have browsed it

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>
Copy after login

2. Introduce sortElements.js

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

3. js code

$(document).ready(function(){ 
var table = $(&#39;#mytable&#39;);//table的id 
$(&#39;#sort_header&#39;)//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find(&#39;td&#39;).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; 
}); 
}); 
});
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!