本地排序jq写法
尚有不明之处，不做解释了。上代码了。。
转载自：网络。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>table-sort</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
.tableStyle{width:970px;margin:auto;margin-top:50px;}
.tableStyle>thead>tr>th{cursor:pointer;text-align:center;}
.sort{position:relative;}
.default-up-down:after{
content:'';
display:block;
position:absolute;
right:0;
top: 9px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:8px solid #DCDCDC;}
.default-up-down:before{
content:'';
display:block;
position:absolute;
right:0;
bottom: 9px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:8px solid #DCDCDC;}
/* 7A80DD */
.custom-up:after{
content:'';
display:block;
position:absolute;
right:0;
top: 9px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:8px solid #7A80DD;}
.custom-down:before{
content:'';
display:block;
position:absolute;
right:0;
bottom: 9px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:8px solid #7A80DD;}
</style>
</head>
<body>
<table id="tableSort" class="table table-bordered tableStyle">
<thead>
<tr>
<th type="number" class="sort default-up-down">
序号
</th>
<th type="string" class="sort default-up-down">
书名
</th>
<th type="number" class="sort default-up-down">
价格（元）
</th>
<th type="string" class="sort default-up-down">
出版时间
</th>
<th type="number" class="sort default-up-down">
印刷量（册）
</th>
<th type="ip" class="sort default-up-down">
IP
</th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td class="sequence">
1
</td>
<td>
狼图腾
</td>
<td>
29.80
</td>
<td>
2009-10
</td>
<td>
50000
</td>
<td>
192.168.1.125
</td>
</tr>
<tr>
<td class="sequence">
2
</td>
<td>
孝心不能等待
</td>
<td>
29.80
</td>
<td>
2009-09
</td>
<td>
800
</td>
<td>
192.68.1.125
</td>
</tr>
<tr>
<td class="sequence">
3
</td>
<td>
藏地密码2
</td>
<td>
28.00
</td>
<td>
2008-10
</td>
<td>
</td>
<td>
192.102.0.12
</td>
</tr>
<tr>
<td class="sequence">
4
</td>
<td>
藏地密码1
</td>
<td>
24.80
</td>
<td>
2008-10
</td>
<td>
</td>
<td>
215.34.126.10
</td>
</tr>
<tr>
<td class="sequence">
5
</td>
<td>
设计模式之禅
</td>
<td>
69.00
</td>
<td>
2011-12
</td>
<td>
</td>
<td>
192.168.1.5
</td>
</tr>
<tr>
<td class="sequence">
6
</td>
<td>
轻量级 Java EE 企业应用实战
</td>
<td>
99.00
</td>
<td>
2012-04
</td>
<td>
5000
</td>
<td>
192.358.1.125
</td>
</tr>
<tr>
<td class="sequence">
7
</td>
<td>
Java 开发实战经典
</td>
<td>
79.80
</td>
<td>
2012-01
</td>
<td>
2000
</td>
<td>
192.168.1.25
</td>
</tr>
<tr>
<td class="sequence">
8
</td>
<td>
Java Web 开发实战经典
</td>
<td>
69.80
</td>
<td>
2011-11
</td>
<td>
2500
</td>
<td>
215.168.54.125
</td>
</tr>
</tbody>
</table>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script>
//图标
sort()
function sort(){
$('.sort').on('click',function(){
if($(this).hasClass('default-up-down')||$(this).hasClass('custom-up')){
$(this).addClass('custom-down').removeClass('custom-up default-up-down');
$(this).siblings('.sort').addClass('default-up-down').removeClass('custom-up custom-down');
}else if($(this).hasClass('custom-down')){
$(this).addClass('custom-up').removeClass('custom-down default-up-down');
$(this).siblings('.sort').addClass('default-up-down').removeClass('custom-up custom-down');
}
})
}
//排序开始
var tableObject = $('#tableSort'), //获取id为tableSort的table对象
tbHead = tableObject.children('thead'), //获取table对象下的thead
tbHeadTh = tbHead.find('tr th'), //获取thead下的tr下的th
tbBody = tableObject.children('tbody'), //获取table对象下的tbody
tbBodyTr = tbBody.find('tr'), //获取tbody下的tr
sortIndex = -1;//排序初始值
tbHeadTh.each(function () {//遍历thead的tr下的th
var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
$(this).click(function () {//给当前表头th增加点击事件
var dataType = $(this).attr("type");//点击时获取当前th的type属性值
checkColumnValue(thisIndex, dataType);
});
});
//对表格排序
function checkColumnValue(index,type){
var trsValue = new Array();
tbBodyTr.each(function () {
var tds = $(this).find('td');
//获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中,保存起来，并清空tbody。
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
$(this).html("");
});
var len = trsValue.length;
if (index == sortIndex) {
//如果已经排序了则直接倒序
trsValue.reverse();
} else {
for (var i = 0; i < len; i++) {
//split() 方法用于把一个字符串分割成字符串数组
//获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
type = trsValue[i].split(".separator")[0];
for (var j = i + 1; j < len; j++) {
//获取每行分割后数组的第二个值,即文本值
value1 = trsValue[i].split(".separator")[1];
//获取下一行分割后数组的第二个值,即文本值
value2 = trsValue[j].split(".separator")[1];
//接下来是数字\字符串等的比较
if (type == "number") {
value1 = value1 == "" ? 0 : value1;
value2 = value2 == "" ? 0 : value2;
if (parseFloat(value1) > parseFloat(value2)) {
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
} else if (type == "ip") {
if (ip2int(value1) > ip2int(value2)) {
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
} else {
if (value1.localeCompare(value2) > 0) {//比较字符串
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for (var i = 0; i < len; i++) {
$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
}
sortIndex = index;
}
//IP转成整型
function ip2int(ip) {
var num = 0;
ip = ip.split(".");
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
return num;
}
</script>
</html>
浙公网安备 33010602011771号