用jquery.sortElements實現(xiàn)table排序

2019-11-20 20:44:47

字體：大中小

供稿：網(wǎng)友

項目中要實現(xiàn)table排序的功能。

網(wǎng)上有很多解決方案，很多都基于jQuery。

jquery.tablesorter，大小17KB，不過他的首頁在ie10下兼容性有點問題。
DataTables，大小75KB，功能強大，帶分頁，搜索等功能。
還有插件叫sortElements，很小巧，只有3KB，兼容性也不錯，而且在Github上有818個星。

最后我選擇用sortElements，實現(xiàn)很簡單：

1. 引入jQuery

復(fù)制代碼代碼如下:

2. 引入sortElements.js

復(fù)制代碼代碼如下:

3. js 代碼

復(fù)制代碼代碼如下:

 
$(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代碼

復(fù)制代碼代碼如下:

 
<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> 