时间:2021-05-18
项目中要实现table排序的功能。
网上有很多解决方案,很多都基于jQuery。
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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用jQuery获取table中行id和td值的实现代码点击$(function(){//用jQuery获取table中td值$("#mytabletd").cl
js,jQuery排序的实现:重点:想要实现排序,最简单的方法就是先把标签用jQuery读进对象数组用js排序好对象数组(针对对象数组进行排序,不要试图直接对网
本文实例讲述了jQuery实现带分组数据的Table表头排序。分享给大家供大家参考,具体如下:如下图:要求:点击表头排序时,"分组"及"分组明细"的数据层次关系
js实现:layui.use(['table','form'],function(){$=layui.jquery;table=layui.table;tabl
jQuery获取table下某一行某一列的值实现代码最近需要获取到某个table下每一行某一列的值,用jQuery做了一会儿,过程如下,仅供参考:lilyoko