這次帶給大家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 = $('#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>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是sortElements實作table排序步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
