表格排序——jQuery插件tablesorter的使用
益稳
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。
主要的特点包括：
-
多列排序
-
支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序
-
支持 TH 元素的 ROWSPAN 和 COLSPAN 属性
-
支持第二个隐藏域排序
-
可扩展外观
-
程序简小，打包后只有 7.4K
1.引入头文件
注意：jquery一定要放在tablesorter之前
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/tablesorter/tablesorter.css" media="all" />
</head>2.创建表格
注意：表格中需要用<thead><th><thead>来指明才可以完成排序,表格加上class="tablesorter"是css设定的样式。
<body>
<table id="tablesorter" border="1" class="tablesorter">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄等级</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>青年</td><td>男</td></tr>
<tr><td>2</td><td>李四</td><td>老年</td><td>男</td></tr>
<tr><td>3</td><td>王五</td><td>中年</td><td>男</td></tr>
</tbody>
</table>
</body>注意：其中tablesorter是表格的Id，
3.1实现简单排序：
jQuery(function($){
$("#tablesorter").tablesorter();
});3.2将指定列进行排序：
如果不想让某一列也进行排序只需要在jQuery代码中写入：（即第一列、第二列不需要排序）
jQuery(function($){
$("#sortTable").tablesorter({
headers:{
0:{sorter:false},
1:{sorter:false}
}
}
});3.3自定义排序规则：
如点击年龄等级，我们希望的顺序是青、中、老排序。可将中文替换成数字，我们通过数字排序来控制中文排序，代码如下：
$.tablesorter.addParser({
id: "grade", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
return s.toLowerCase().replace(/青/,1).replace(/中/,2).replace(/老/,3); //将中文换成数字
},
type: "numeric" //按数值排序
});
jQuery(function($){
$("#sortTable").tablesorter({
headers:{
0:{sorter:false},
1:{sorter:false},
2:{sorter:"grade"}//将第3列（年龄等级）按前面定义的grade方式排序
}
}
});在table后面加一个链接，代码：<a href="#" id="trigger">按年龄等级排列</a>
用jquery模拟点击事件来控制，代码为：
$("#trigger").click(function(){
var t=$("thead tr").children(); //取得thead下的tr的所有子元素
$(t[2]).trigger("click");//模拟年龄等级点击事件
});附加补充：
摘自：http://www.bitscn.com/school/Javascript/201408/308392.html
在使用过程遇到的一个问题，我的表格数据是通过ajax获取的，首页进行排序的时候没问题当进行下一页排序的时候，会把上页的数据也重新显示出来，解决这个问题可以在你ajax获取数据之后触发"update"事件，代码如下：
代码如下:
$(".tablesorter").trigger("update");
类似资料：