Using jquery.sortElements to implement table sorting_javascript skills

The 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

Copy code The code is as follows:

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

2. Introduction sortElements.js

Copy code The code is as follows:

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

3. js code

Copy code The code is as follows:

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

Copy code The code is as follows:

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