jquery对table做排序操作的实例演示
jQuery实战:Table排序操作详解
在前端开发中,我们经常需要对数据进行展示并进行排序操作。今天,我将通过一个实例来演示如何使用jQuery对table进行排序操作。
我们需要在前台页面加载时,为每行table row(tr)添加一个自定义属性`data-sort-field-ftime`,该属性的值为我们需要排序的字段的值。例如,我的字段是数字类型,这样可以更方便进行排序。
代码如下:
```javascript
$.each(jsonarray, function(i, obj) {
var troptions = "
troptions += "
troptions += "
troptions += "
troptions += "
troptions += "
// 将生成的tr添加到页面中
});
```
接下来,我们需要在要排序的表头添加onchange事件,以实现点击表头进行排序的功能。以下是具体的onchange事件处理函数:
```javascript
function changepm(){
var sortType=$("pm").val(); //获取排序类型(升序或降序)
var $trList = $("ta tbody > tr"); //获取现有的tr对象
//使用冒泡排序对tr进行排序
for (var i = 0; i < $trList.length - 1; i++) {
for (var j = 0; j < $trList.length - 1 - i; j++) {
var value1 = parseInt($trList[j].attributes["data-sort-field-ftime"].nodeValue);
var value2 = parseInt($trList[j + 1].attributes["data-sort-field-ftime"].nodeValue);
if (sortType === "asc" ? value1 > value2 : value1 < value2) {
//交换两个tr的位置
var $temp = $trList[j];
$trList[j] = null;
$trList[j] = $trList[j + 1];
$trList[j + 1] = null;
$trList[j + 1] = $temp;
}
}
}
console.log($trList); //此处可以打印出排序后的tr集合进行调试
$trList.appendTo($("ta > tbody").empty()); //清空原来的tbody,并添加排序后的tr
}
```
以上就是使用jQuery对table进行排序操作的详细过程。希望对大家有所帮助,同时也希望大家继续支持狼蚁SEO。在实际使用中,可以根据具体需求进行修改和优化。
编程语言
- jquery对table做排序操作的实例演示
- PHP对象实例化单例方法
- jsp页面中EL表达式被当成字符串处理不显示值问题
- php中的explode()函数实例介绍
- 浅析JavaScript中break、continue和return的区别
- js计算两个时间差 天 时 分 秒 毫秒的代码
- mysql 5.7.18 winx64安装配置方法图文教程
- asp-生成静态页面函数
- 深入浅出ES6新特性之函数默认参数和箭头函数
- Tomcat+Jsp环境下的中文问题
- SQL Server 存储过程解析
- php使用$_POST或$_SESSION[]向js函数传参
- Symfony2使用Doctrine进行数据库查询方法实例总结
- vue实现与安卓、IOS交互的方法
- 浅析php中抽象类和接口的概念以及区别
- 如何用JavaScript实现动态修改CSS样式表