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

Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。

主要的特点包括：

• 多列排序

• 支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序

• 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性

• 支持第二个隐藏域排序

• 可扩展外观

• 程序简小，打包后只有 7.4K

1.引入头文件

注意：jquery一定要放在tablesorter之前

2.创建表格

注意：表格中需要用来指明才可以完成排序,表格加上class="tablesorter"是css设定的样式。

	

		

			

				
编号
				
姓名
				
年龄等级
				
性别
			
		
		

			
1
张三
青年
男
			
2
李四
老年
男
			
3
王五
中年
男
		
	

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后面加一个链接，代码：按年龄等级排列

               用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插件下载