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

来源：互联网发布：移民澳大利亚知乎编辑：程序博客网时间：2024/04/28 19:02

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

网上有很多解决方案，很多都基于jQuery。

jquery.tablesorter，大小17KB，不过他的首页在ie10下兼容性有点问题。
DataTables，大小75KB，功能强大，带分页，搜索等功能。
还有插件叫sortElements，很小巧，只有3KB，兼容性也不错，而且在Github上有818个星。

最后我选择用sortElements，实现很简单：

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

0 0