源码:
<!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>