您好,欢迎访问一九零五行业门户网

用jquery.sortElements实现table排序_javascript技巧

项目中要实现table排序的功能。
网上有很多解决方案,很多都基于jquery。
jquery.tablesorter,大小17kb,不过他的首页在ie10下兼容性有点问题。
datatables,大小75kb,功能强大,带分页,搜索等功能。
还有插件叫sortelements,很小巧,只有3kb,兼容性也不错,而且在github上有818个星。
最后我选择用sortelements,实现很简单:
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代码
复制代码 代码如下:
facility name
phone #
city
speciality
ccc
00001111
amsterdam
ggg
...
其它类似信息

推荐信息