


Using jquery.sortElements to implement table sorting_javascript skills
May 16, 2016 pm 04:50 PMThe table sorting function needs to be implemented in the project.
There are many solutions online, many of which are based on jQuery.
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. Introduction sortElements.js
<script type="text/javascript " src="jquery.sortElements.js"></script>
3. js code
$(document).ready(function(){
var table = $('#mytable');//table's id
$('#sort_header')//Headerid to be sorted
.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> ;GGG</td>
</tr>
...
</table>

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial

8 Stunning jQuery Page Layout Plugins
