项目中要实现table排序的功能。
网上有非常多解决方式,非常多都基于jQuery。
- jquery.tablesorter。大小17KB。只是他的首页在ie10下兼容性有点问题。
- DataTables,大小75KB。功能强大,带分页,搜索等功能。
- 还有插件叫sortElements,非常小巧。仅仅有3KB。兼容性也不错。并且在Github上有818个星。
最后我选择用sortElements,实现非常easy:
1. 引入jQuery
2. 引入sortElements.js
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代码
实现效果:www.bishouyi.cn
(由padolsey开发,github地址为https://github.com/padolsey/jquery.fn/tree/master/sortElements)
參考:http://stackoverflow.com/questions/3160277/jquery-table-sort