JS Implementation Table sort (jquery.sortelements under jquery)

Tag: Stack This problem online git script post DataTable html

The ability to implement table sorting in the project.

There are many solutions on the web, many of which are based on jquery.

• Jquery.tablesorter. Size 17KB. Just his home in Ie10 under compatibility a bit of a problem.
• DataTables, size 75KB. Powerful, with paging, search and other functions.

• There are plug-ins called sortelements, very small. There is only 3KB. Compatibility is good. And there are 818 of stars on GitHub.

Finally I chose to use sortelements to achieve very easy:

1. Introduction of jquery

<script type= "Text/javascript" src= "Jquery.js" ></script>  

2. Introduction of 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 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

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

Achieve effect: www.bishouyi.cn

(developed by Padolsey, GitHub address is https://github.com/padolsey/jquery.fn/tree/master/sortElements)

References: Http://stackoverflow.com/questions/3160277/jquery-table-sort

JS Implementation Table sort (jquery.sortelements under jquery)