The ability to implement table sorting in the project.
There are many solutions on the web, many of them based on jquery.
Jquery.tablesorter, size 17KB, but his home page in the Ie10 under the compatibility of a bit of a problem.
DataTables, size 75KB, powerful, with paging, search and other functions.
There are plug-ins called sortelements, very small, only 3KB, compatibility is also good, and on the GitHub has 818 stars.
Finally I choose to use sortelements, the realization is very simple:
1. Introducing jquery
Copy Code code as follows:
<script type= "Text/javascript" src= "Jquery.js" ></script>
2. Introduction of Sortelements.js
Copy Code code as follows:
<script type= "Text/javascript" src= "Jquery.sortElements.js" ></script>
3. JS Code
Copy Code code as follows:
$ (document). Ready (function () {
var table = $ (' #mytable '); ID of//table
$ (' #sort_header ')//Headerid to sort
. 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 code 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>
<tr>
<td>CCC</td>
<td>00001111</td>
<td>Amsterdam</td>
<td>GGG</td>
</tr>
...
</table>
