当前位置: 首页 > 工具软件 > tablesorter > 使用案例 >

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

益稳
2023-12-01

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"事件,代码如下: 
代码如下:
$(".tablesorter").trigger("update"); 

tableserter官方文档

Tablesorter插件下载


 类似资料: