這次帶給大家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中文網其他相關文章!