用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，不過(guò)他的首頁(yè)在ie10下兼容性有點(diǎn)問(wèn)題。
DataTables，大小75KB，功能強(qiáng)大，帶分頁(yè)，搜索等功能。
還有插件叫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，不過(guò)他的首頁(yè)在ie10下兼容性有點(diǎn)問(wèn)題。
DataTables，大小75KB，功能強(qiáng)大，帶分頁(yè)，搜索等功能。
還有插件叫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)文章
這篇文章主要為大家詳細(xì)介紹了js cookie實(shí)現(xiàn)記住密碼功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了js中如何往對(duì)象中添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了java設(shè)計(jì)模式中觀察者模式，全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
這篇文章主要介紹了JavaScript操作class和style樣式的相關(guān)資料,需要的朋友可以參考下2016-02-02
在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計(jì)中，主要關(guān)注于公用和私有作用域。公用作用域中的對(duì)象屬性可以從對(duì)象外部訪問(wèn)，即開發(fā)者創(chuàng)建對(duì)象的實(shí)例后，就可使用它的公用屬性。2009-08-08
微信小程序?qū)崿F(xiàn)團(tuán)購(gòu)或秒殺批量倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)團(tuán)購(gòu)或秒殺批量倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JavaScript使用閉包模仿塊級(jí)作用域操作,結(jié)合實(shí)例形式分析了javascript閉包的原理及模仿塊級(jí)作用域相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
用JS寫一段判斷搜索引擎來(lái)路并且屏蔽PC的跳轉(zhuǎn)代碼
以下是用JS寫的判斷搜索引擎來(lái)路并屏蔽PC跳轉(zhuǎn)的代碼,需要的朋友可以參考下2023-12-12
TypeScript中的映射類型和數(shù)學(xué)中的映射類似,能夠?qū)⒁粋€(gè)集合的元素轉(zhuǎn)換為新集合的元素,本文就來(lái)介紹一下TypeScript中類型映射的使用,感興趣的可以了解一下2023-10-10
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說(shuō)是無(wú)懈可擊了2013-09-09