表格排序——jQuery插件tablesorter的使用

最新推荐文章于 2024-03-14 11:54:01 发布

dream0352

最新推荐文章于 2024-03-14 11:54:01 发布

阅读量2.9k

点赞数 2

分类专栏： Web前端文章标签： tablesorter的使用 tablesorter jQuery插件tablesorter

本文链接：https://blog.csdn.net/dream0352/article/details/50284321

版权

Web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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>

3.js代码

注意：其中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方式排序
		}
    }
});

3.4使用链接对排序进行控制：
在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"事件，代码如下：
代码如下: