源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

用jquery.sortElements实现table排序

  • 时间:2022-05-25 17:29 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用jquery.sortElements实现table排序
项目中要实现table排序的功能。 网上有很多解决方案,很多都基于jQuery。 jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题。 DataTables,大小75KB,功能强大,带分页,搜索等功能。 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。 最后我选择用sortElements,实现很简单: 1. 引入jQuery
[u]复制代码[/u] 代码如下:
<script type="text/javascript" src="jquery.js"></script>
2. 引入sortElements.js
[u]复制代码[/u] 代码如下:
<script type="text/javascript" src="jquery.sortElements.js"></script>
3. js 代码
[u]复制代码[/u] 代码如下:
$(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代码
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部