欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2014年05月04日 15:20:41   作者:  
實(shí)現(xiàn)table排序,網(wǎng)上有很多解決方案,很多都基于jQuery,最后我選擇用sortElements,實(shí)現(xiàn)很簡(jiǎn)單
項(xiàng)目中要實(shí)現(xiàn)table排序的功能。

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

jquery.tablesorter,大小17KB,不過他的首頁在ie10下兼容性有點(diǎn)問題。
DataTables,大小75KB,功能強(qiáng)大,帶分頁,搜索等功能。
還有插件叫sortElements,很小巧,只有3KB,兼容性也不錯(cuò),而且在Github上有818個(gè)星。

最后我選擇用sortElements,實(shí)現(xiàn)很簡(jiǎn)單:

1. 引入jQuery
復(fù)制代碼 代碼如下:

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

2. 引入sortElements.js
復(fù)制代碼 代碼如下:

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

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>

相關(guān)文章

最新評(píng)論