首頁 > web前端 > js教程 > 主體

sortElements實作table排序步驟詳解

php中世界最好的语言
發布: 2018-04-26 09:23:16
原創
1834 人瀏覽過

這次帶給大家sortElements實作table排序步驟詳解,sortElements實作table排序的注意事項有哪些,以下就是實戰案例,一起來看一下。

jquery.tablesorter,大小17KB,不過他的首頁在ie10下相容性有點問題。 

DataTables,大小75KB,功能強大,有分頁,搜尋等功能。
還有外掛叫sortElements,很小巧,只有3KB,相容性也不錯,而且在Github上有818個星星。
最後我選擇用sortElements,實作很簡單:
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 = $(&#39;#mytable&#39;);//table的id 
$(&#39;#sort_header&#39;)//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find(&#39;td&#39;).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>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

jquery實作表格排序即時搜尋功能

#jQuery做出圓形圖示選單輪流切換功能

#

以上是sortElements實作table排序步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!