用jquery.sortElements实现table排序
时间：2021-03-08 11:39:01|栏目：JavaScript代码|点击： 次
项目中要实现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>
网上有很多解决方案，很多都基于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>
栏 目：JavaScript代码
下一篇：js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
本文标题：用jquery.sortElements实现table排序
本文地址：http://www.codeinn.net/misctech/76662.html
