使用jquery.sortElements轻量级实现表格排序

jquery.sortElements表格排序实现

项目需求中需要为表格添加排序功能。

目前网络上存在多种基于jQuery的解决方案。

jquery.tablesorter插件体积为17KB，但在IE10环境下存在兼容性缺陷。

DataTables功能丰富，包含分页和搜索，但体积较大，达到75KB。

sortElements插件体积小巧，仅3KB，兼容性良好，且在GitHub上获得了818个星标。

最终决定采用sortElements，其实现过程十分简洁：

第一步，引入jQuery库。

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

第二步，引入sortElements.js插件。

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

第三步，编写JavaScript逻辑代码。

 
$(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;
}); 
}); 
}); 

第四步，编写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>