因项目有个需求需要对table的当前页进行排序,当前页面有临时数据,所以只能在前端把这些数据排序再更新表格,没有符合需求的控件可以用,就用CSS整了一个,适合一些用在table要求比较灵活的排序需求上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://192.168.83.178:7006/Scripts/jquery-3.3.1.js"></script>
<title>Title</title>
<style type="text/css">
.on {
width: 100px;
height: 40px;
line-height: 40px;
display: table-cell;
position: relative;
}
.on a {
display: block;
overflow: hidden;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
color: #5e5e5e;
}
.arrow_bottom {
content: '';
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 6px 6px;
border-color: transparent transparent #5e5e5e;
position: absolute;
transform: rotate(180deg);
bottom: 11px;
right: 20px;
}
.arrow_bottom_select {
content: '';
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 6px 6px;
border-color: transparent transparent #7a80dd;
position: absolute;
transform: rotate(180deg);
bottom: 11px;
right: 20px;
}
.arrow_up {
content: '';
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 6px 6px;
border-color: transparent transparent #5e5e5e;
position: absolute;
top: 11px;
right: 20px;
}
.arrow_up_select {
content: '';
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 6px 6px;
border-color: transparent transparent #7a80dd;
position: absolute;
top: 11px;
right: 20px;
}
</style>
</head>
<body>
<div class="on" onclick="customSort()">Match%<i id="arrow_up" class="arrow_up"></i><i id="arrow_bottom" class="arrow_bottom"></i></div>
</body>
<script>
var status = 'default';
function customSort(){
if(status === 'default'){
status = 'asc';
$("#arrow_up").removeClass('arrow_up');
$("#arrow_up").addClass('arrow_up_select')
console.log('default');
}else if(status==='asc'){
status = 'desc';
console.log('asc');
$("#arrow_up").removeClass('arrow_up_select');
$("#arrow_up").addClass('arrow_up')
$("#arrow_bottom").removeClass('arrow_bottom');
$("#arrow_bottom").addClass('arrow_bottom_select')
}else if(status==='desc'){
status = 'default';
console.log('desc');
$("#arrow_bottom").removeClass('arrow_bottom_select');
$("#arrow_bottom").addClass('arrow_bottom')
}
alert('click')
}
</script>
</html>