用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
<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>
網(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)文章
JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)2009-07-07完美解決spring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問題
下面小編就為大家?guī)硪黄昝澜鉀Qspring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03詳解webpack require.ensure與require AMD的區(qū)別
本篇文章主要介紹了詳解webpack require.ensure與require AMD的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實(shí)dom詳解
這篇文章主要為大家介紹了JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實(shí)dom詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01