使用jquery.tableSort.js插件对table里面的数据进行排序处理
盖成弘
1.下载jquery.tableSort.js插件
要对table里面的数据进行排序，首先需要下载jquery.tableSort.js插件(链接: https://pan.baidu.com/s/1JM6e9A-e8Vt7262aA3l9fA 提取码: w6q5)，以及引入jQuery包，因为所有jq插件都是基于jQuery包的
2.引入 jquery.tableSort.js到需要排序的页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>测试tableSort</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<style type="text/css">
table td {
word-break: break-all;
word-wrap: break-word;
max-width: 300px;
}
.thead-th {
width: 10%;
vertical-align: middle;
text-align: center;
border: 1px solid #ddd
}
.tbody-th {
width: 10%;
vertical-align: middle;
text-align: center;
border: 1px solid #ddd;
}
</style>
<div class="project-index">
<div class="table-responsive">
<div class="row-fluid ">
<table class="table table-bordered" id="tbStudent">
<thead style="border: 1px solid #ddd">
<tr>
<th class="thead-th">id</th>
<th class="thead-th">名称</th>
<th class="thead-th">人数</th>
<th class="thead-th">金额</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tbody-th">16</td>
<td class="tbody-th">红帽</td>
<td class="tbody-th">2</td>
<td class="tbody-th">270900000000</td>
</tr>
<tr>
<td class="tbody-th">4</td>
<td class="tbody-th">海盗</td>
<td class="tbody-th">1</td>
<td class="tbody-th">120000000</td>
</tr>
<tr>
<td class="tbody-th">47</td>
<td class="tbody-th">王子</td>
<td class="tbody-th">1</td>
<td class="tbody-th">200950000000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="/assets/b86ac52e/jquery.js?v=1675827230"></script>
<script src="/js/tablesorter.min.js?v=1680165450" 0="backend\assets\AppAsset" 1="backend\assets\AppAsset"></script>
<script src="/assets/5562aa00/js/bootstrap.js?v=1675827230"></script>
<script src="/assets/59b9e44c/js/bootstrap-datepicker.js?v=1676259860"></script>
<script src="/assets/346c0dae/bootstrap-datepicker.zh-CN.min.js?v=1676259860"></script>
<script>
$(function () {
//第2列不排序：sorter:false 是指指定的列不排序
$("#tbStudent").tablesorter({ headers: { 1: { sorter: false }}});
//加载排序
$("#tbStudent").tablesorter();
</script>
</body>
</html>
3.支持中文的排序
tablesorter.js，并不支持中文的排序，对其源码进行修改，可对中文进行排序
源码：
function sortText(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
function sortTextDesc(a, b) {
return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};
修改后代码：
function sortText(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
function sortTextDesc(a, b) {
return ((b < a) ? -1 : ((b > a) ? 1 : 0));
};
4.ip排序不正确时可修改
源码：
ts.addParser({
id: "ipAddress",
is: function(s) {
return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
},
format: function(s) {
var a = s.split("."), r = "", l = a.length;
for(var i = 0; i < l; i++) {
var item = a[i];
if(item.length == 2) {
r += "0" + item;
} else {
r += item;
}
}
return $.tablesorter.formatFloat(r);
},
type: "numeric"
});
修改后代码：
ts.addParser({
id: "ipAddress",
is: function(s) {
return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
},
format: function(s) {
var a = s.split("."), r = "", l = a.length;
for(var i = 0; i < l; i++) {
var item = a[i];
if(item.length == 1) {
r += "00" + item;
}else if(item.length == 2) {
r += "0" + item;
} else {
r += item;
}
}
return $.tablesorter.formatInt(r);
},
type: "numeric"
});5.扩展排序函数
/*
*工作需要扩展的，仅自己用！
*扩展排序函数
*/
//status排序
$.tablesorter.addParser({
id: "status", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
var str=0;
if(s.indexOf('<')!=-1){
str=0;
}else{
str=s.toLowerCase().replace(/在线/,1).replace(/离线/,2); //将中文换成数字
}
return str;
},
type: "numeric" //按数值排序
});
//num排序
$.tablesorter.addParser({
id: "num", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
var point=s.indexOf("</span>");
var str=s[point-1];
if(str.indexOf('>')!=-1){
str=-1;
}
return str;
},
type: "numeric" //按数值排序
});
类似资料：