页面上实现表格数据排序

最新推荐文章于 2022-04-11 11:04:41 发布

BEYOND1118

最新推荐文章于 2022-04-11 11:04:41 发布

阅读量2.7k

点赞数

分类专栏： html与js

本文链接：https://blog.csdn.net/BEYOND1118/article/details/79634890

版权

html与js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
<head>

<style>
.table{
width: 400px;
height: 180px;
margin: auto;
text-align: center;
}
.table th,
.table td
{
width: 50px;
height: 60px;
}
.tigle{
position: relative;
}
.triangle-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #c8c8c8;
position: absolute;
top: 20px;
right: 20px;
}

.triangle-down {
width: 0;
height: 0;
padding-top: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #626666;
position: absolute;
top: 32px;
right: 20px;
}
</style>

</head>

<body>

<table class="table" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>项目名</th>
<th>项目状态</th>
<th class="tigle">
日期
<span>
<div class="triangle-up" attrCd_listSort="1"></div>

<div class="triangle-down" attrCd_listSort="0"></div>
</span>
</th>
<th>总金额</th>
</tr>
<tbody id="tbody">
<tr>
<td>锭融宝1</td>
<td>出借中1</td>
<td>2018-1-22</td>
<td>$101</td>
</tr>
<tr>
<td>锭融宝2</td>
<td>出借中2</td>
<td>2018-1-24</td>
<td>$102</td>
</tr>
<tr>
<td>锭融宝3</td>
<td>出借中3</td>
<td>2016-2-25</td>
<td>$103</td>
</tr>
<tr>
<td>锭融宝4</td>
<td>出借中3</td>
<td>2017-1-23</td>
<td>$103</td>
</tr>
<tr>
<td>锭融宝5</td>
<td>出借中3</td>
<td>2018-3-21</td>
<td>$103</td>
</tr>
<tr>
<td>锭融宝6</td>
<td>出借中3</td>
<td>2018-2-23</td>
<td>$103</td>
</tr>
</tbody>
</table>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<script>
$(document).ready(function(){
/*页面初始化调用排序函数，-1表示降序*/
sortFun(-1);

/*点击升序按钮事件*/
$('.triangle-up').click(function(){/*1表示升序排列*/

/*样式调整*/
$(".triangle-up").css("border-bottom","8px solid #626666");
$(".triangle-down").css("border-top","8px solid #c8c8c8");

/*获取升序按钮对应的值*/
var attrCd_listSort = $('div[attrCd_listSort]').attr('attrCd_listSort');

/*点击升序按钮后调用排序函数*/
sortFun(attrCd_listSort);
});

/*点击降序按钮事件*/
$('.triangle-down').click(function(){/*0表示降序排列*/

/*样式调整*/
$(".triangle-up").css("border-bottom","8px solid #c8c8c8");
$(".triangle-down").css("border-top","8px solid #626666");

/*获取降序按钮对应的值*/
var attrCd_listSort = $(this).attr('attrCd_listSort');
/*点击降序按钮后调用排序函数*/
sortFun(attrCd_listSort);

/*******若使用后台逻辑排序，则使用下面的ajax请求********/
/*alert("传到后台的供查询排序的值sortNum="+attrCd_listSort);*/
/*ajax异步请求后台进行查询*/
/*$.ajx({
contentType: "application/json; charset=utf-8",
async : false,
cache : false,
url : "${pageContext.request.contextPath}/",
type : "post",
data : {"sortNum" : attrCd_listSort},
success : function(){

},
error : function(){

}
});*/
});

/*时间顺序排序函数：接收参数attrCd_listSort，若为1升序，若为或者-1降序*/
function sortFun(attrCd_listSort){
/*alert("排序函数被调用，您传的识别参数为："+attrCd_listSort);*/

/*用来排序的数组*/
var trs = [];
/*将表格的tbody作为对象*/
var tbody = document.getElementById("tbody");
/*将表格的tbody里面所有行作为操作对象*/
var allRows = tbody.rows;

/*遍历行对象，将所有的tr行加入到排序数组trs中去*/
for (var i = 0; i < allRows.length; i++) {
trs.push(allRows[i]); /*等用于：trs[i]=allRows[i];*/
}

/*排序数组调用排序方法进行排序（默认页面加载按照时间DESC）*/
trs.sort(function (tr1, tr2) {
var date1 = $(tr1).find('td:eq(2)').text().split("-");
var date2 = $(tr2).find('td:eq(2)').text().split("-");

var date1_1 = date1[0]+date1[1]+date1[2];
var date2_2 = date2[0]+date2[1]+date2[2];

if(attrCd_listSort == 1){
return date1_1 - date2_2;
} else{
return date2_2 - date1_1;
}
});

/*将排序好的数组加入到tbody中去（appendChild(trs[i]：删除未排序之前的行，加入排序好之后的行）*/
for (var i = 0; i < trs.length; i++) {
tbody.appendChild(trs[i]);
}
}
});
</script>
</body>
</html>

BEYOND1118

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面上实现表格数据排序

源码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;style&gt; .table{ width: 400px; height: 180px; margin: auto; text-align: center; } .table th, .table td { width: 50px; height: 60p...
复制链接

扫一扫