js实现table排序（jQuery下的jquery.sortElements）

项目中要实现table排序的功能。

网上有非常多解决方式，非常多都基于jQuery。

• jquery.tablesorter。大小17KB。只是他的首页在ie10下兼容性有点问题。
• DataTables，大小75KB。功能强大，带分页，搜索等功能。

• 还有插件叫sortElements，非常小巧。仅仅有3KB。兼容性也不错。并且在Github上有818个星。

最后我选择用sortElements，实现非常easy：

1. 引入jQuery

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

2. 引入sortElements.js

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

3. js 代码

$(document).ready(function(){
       var table = $('#mytable');//table的id
       $('#sort_header')//要排序的headerid
        .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代码

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

实现效果：www.bishouyi.cn

(由padolsey开发，github地址为https://github.com/padolsey/jquery.fn/tree/master/sortElements)

參考：http://stackoverflow.com/questions/3160277/jquery-table-sort