用jQuery+Tablesorter实现客户端分页与排序
[size=xx-small]
最近在公司的项目中需要对表格进行排序，上网找了一下，感觉感觉tablesorter不错，但官网上的介绍很少，而且没有中文手册，很多地方都不明不白。。。结合官网的例子，自己摸索了一下，还真整出来了，呵呵，下面介绍一下常用的方法：
tablesorert官网http://tablesorter.com
[size=medium]
jquery官网http://jquery.com/
先建立一个表格，代码如下，jquery-1.3.2.min.js，jquery.tablesorter.min.js请自行到官网下载
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青年</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少年</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中年</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老年</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中年</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
</body>
<html>
效果如下：
下面就开始写js，让点击表头时，能够排序，其实很简单，一句代码就足够了，很好很强大呵呵，在上面的代码中加入
<script type="text/javascript">
$("#mytable").tablesorter();
</script>
这时，点击表头，例如年龄，是不是发现此时的表格已经按年龄的升序来排了，再点一次就变成降序了~~效果如下图
现在排序已经做好了，但是实际上我们并不需要表头里所有的列都能排序啊，例如我们不需要地址的排序，怎么去掉它呢？很简单~只需在tablesoter里设置地址所在的列（地址为5）排序（sorter）为false就行了，代码如下：
$("#mytable").tablesorter({headers:{5:{sorter:false}}});
这时再点击地址，发现该列的排序功能已经失效了~
再定义一下表头的样式：
thead{
background:#555555;
color:#ff0000;
}
降序时样式：
th.headerSortDown{
color:#00ff00;
}
升序时样式：
th.headerSortUp{
color:#0000ff;
}
此时整个页面代码如下：
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<style type="text/css">
thead{
background:#555555;
color:#ff0000;
}
th.headerSortDown{
color:#00ff00;
}
th.headerSortUp{
color:#0000ff;
}
</style>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青年</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少年</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中年</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老年</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中年</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
<script type="text/javascript">
$("#mytable").tablesorter({headers:{5:{sorter:false}}});
</script>
</body>
<html>
效果如图：
现在我们点击年龄等级，我们希望的顺序是少、青、中、老或者老、中、青、少这样排，但却发现排序的方式跟我们希望的不一样，这怎么办呢？替换，将中文替换成数字，我们通过数字排序来控制中文排序，代码如下：
$.tablesorter.addParser({
id: "grade", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
return s.toLowerCase().replace(/少/,1).replace(/青/,2).replace(/中/,3).replace(/老/,4); //将中文换成数字
},
type: "numeric" //按数值排序
});
$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}}); //将第四列（年龄等级）按前面定义的grade方式排序
现在再点击年龄等级，发现排序方式已经可以按照我们的意愿来排了~效果如下图：
能否在表格之外用一个链接来控制表格的排序呢？答案是可以的，官网的例子是这样的：
在table后面加一个链接，代码如下
<a href="#" id="triggerlink">按金钱排列</a>
在js里加：
$("#triggerlink").click(function(){
var sorting=[[7,0]];
$("#mytable").trigger("sorton",[sorting]);
});
此时点击 按金钱排列 ，发现表格已经按照金钱来排序了，效果如图：
但只能点一次，再点就没反映了，不知是我没看懂官网的例子还是本来就是个缺陷，于是直接用jquery模拟点击事件来控制，代码为：
$("#triggerlink").click(function(){
var t=$("thead tr").children(); //取得thead下的tr的所有子元素
$(t[7]).trigger("click");//模拟 金钱 点击事件
});
现在反复点击 按金钱排序 ，效果已经实现了~可以反复按照金钱升降序来排，整个页面完整代码如下：
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<!--designed by libihong-->
<style type="text/css">
thead{
background:#555555;
color:#ff0000;
}
th.headerSortDown{
color:#00ff00;
}
th.headerSortUp{
color:#0000ff;
}
</style>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
<a href="#" id="triggerlink">按金钱排列</a>
<script type="text/javascript">
$.tablesorter.addParser({
id: "grade",
is: function(s){
return false;
},
format: function(s){
return s.toLowerCase().replace(/少/,1).replace(/青/,2).replace(/中/,3).replace(/老/,4);
},
type: "numeric"
});
$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}});
/*$("#triggerlink").click(function(){
var sorting=[[7,0]];
$("#mytable").trigger("sorton",[sorting]);
});*/
$("#triggerlink").click(function(){
var t=$("thead tr").children();
$(t[7]).trigger("click");
});
</script>
</body>
<html>
好了，先介绍到这里，更多例子请到官网研究。
ps：tablesorter默认排序的方式好像是按表头内容类型来排的，表头类型为数值时就按数值排，表头为字符串时就按字符串排，可是有时候当一个列中所有的数据都是数字时，理应按数值方式来排，但它却按字符串排，例如升序时，11排在2的前面，降序时，2排在11前面，这个很奇怪，我也遇到过，去官网查也没找到答案，当出现这种情况时，将该列的排序方式指定为currency（货币）方式就行了，如指定第四列按货币方式排列，
3: {sorter: "currency"}[/size][/size]
最近在公司的项目中需要对表格进行排序，上网找了一下，感觉感觉tablesorter不错，但官网上的介绍很少，而且没有中文手册，很多地方都不明不白。。。结合官网的例子，自己摸索了一下，还真整出来了，呵呵，下面介绍一下常用的方法：
tablesorert官网http://tablesorter.com
[size=medium]
jquery官网http://jquery.com/
先建立一个表格，代码如下，jquery-1.3.2.min.js，jquery.tablesorter.min.js请自行到官网下载
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青年</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少年</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中年</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老年</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中年</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
</body>
<html>
效果如下：
下面就开始写js，让点击表头时，能够排序，其实很简单，一句代码就足够了，很好很强大呵呵，在上面的代码中加入
<script type="text/javascript">
$("#mytable").tablesorter();
</script>
这时，点击表头，例如年龄，是不是发现此时的表格已经按年龄的升序来排了，再点一次就变成降序了~~效果如下图
现在排序已经做好了，但是实际上我们并不需要表头里所有的列都能排序啊，例如我们不需要地址的排序，怎么去掉它呢？很简单~只需在tablesoter里设置地址所在的列（地址为5）排序（sorter）为false就行了，代码如下：
$("#mytable").tablesorter({headers:{5:{sorter:false}}});
这时再点击地址，发现该列的排序功能已经失效了~
再定义一下表头的样式：
thead{
background:#555555;
color:#ff0000;
}
降序时样式：
th.headerSortDown{
color:#00ff00;
}
升序时样式：
th.headerSortUp{
color:#0000ff;
}
此时整个页面代码如下：
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<style type="text/css">
thead{
background:#555555;
color:#ff0000;
}
th.headerSortDown{
color:#00ff00;
}
th.headerSortUp{
color:#0000ff;
}
</style>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青年</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少年</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中年</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老年</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中年</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
<script type="text/javascript">
$("#mytable").tablesorter({headers:{5:{sorter:false}}});
</script>
</body>
<html>
效果如图：
现在我们点击年龄等级，我们希望的顺序是少、青、中、老或者老、中、青、少这样排，但却发现排序的方式跟我们希望的不一样，这怎么办呢？替换，将中文替换成数字，我们通过数字排序来控制中文排序，代码如下：
$.tablesorter.addParser({
id: "grade", //指定一个唯一的ID
is: function(s){
return false;
},
format: function(s){
return s.toLowerCase().replace(/少/,1).replace(/青/,2).replace(/中/,3).replace(/老/,4); //将中文换成数字
},
type: "numeric" //按数值排序
});
$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}}); //将第四列（年龄等级）按前面定义的grade方式排序
现在再点击年龄等级，发现排序方式已经可以按照我们的意愿来排了~效果如下图：
能否在表格之外用一个链接来控制表格的排序呢？答案是可以的，官网的例子是这样的：
在table后面加一个链接，代码如下
<a href="#" id="triggerlink">按金钱排列</a>
在js里加：
$("#triggerlink").click(function(){
var sorting=[[7,0]];
$("#mytable").trigger("sorton",[sorting]);
});
此时点击 按金钱排列 ，发现表格已经按照金钱来排序了，效果如图：
但只能点一次，再点就没反映了，不知是我没看懂官网的例子还是本来就是个缺陷，于是直接用jquery模拟点击事件来控制，代码为：
$("#triggerlink").click(function(){
var t=$("thead tr").children(); //取得thead下的tr的所有子元素
$(t[7]).trigger("click");//模拟 金钱 点击事件
});
现在反复点击 按金钱排序 ，效果已经实现了~可以反复按照金钱升降序来排，整个页面完整代码如下：
<html>
<head>
<title>jquery.tablesorter</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.tablesorter.min.js"></script>
</head>
<!--designed by libihong-->
<style type="text/css">
thead{
background:#555555;
color:#ff0000;
}
th.headerSortDown{
color:#00ff00;
}
th.headerSortUp{
color:#0000ff;
}
</style>
<body>
<table id="mytable" border="1">
<thead>
<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年龄等级</th><th>地址</th><th>电话</th><th>金钱</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>a sdf</td><td>男</td><td>22</td><td>青</td><td>啊北京</td><td>010123456</td><td>￥2,000</td></tr>
<tr><td>2</td><td>d wr</td><td>男</td><td>10</td><td>少</td><td>不广州</td><td>020123456</td><td>￥5,000</td></tr>
<tr><td>3</td><td>e vcv</td><td>女</td><td>35</td><td>中</td><td>才上海</td><td>021123456</td><td>￥1,030</td></tr>
<tr><td>11</td><td>b sdewr</td><td>女</td><td>67</td><td>老</td><td>的天津</td><td>022123456</td><td>￥1,000.1</td></tr>
<tr><td>5</td><td>c sdfd</td><td>男</td><td>40</td><td>中</td><td>额重庆</td><td>023123456</td><td>￥3,000</td></tr>
</tbody>
</table>
<a href="#" id="triggerlink">按金钱排列</a>
<script type="text/javascript">
$.tablesorter.addParser({
id: "grade",
is: function(s){
return false;
},
format: function(s){
return s.toLowerCase().replace(/少/,1).replace(/青/,2).replace(/中/,3).replace(/老/,4);
},
type: "numeric"
});
$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}});
/*$("#triggerlink").click(function(){
var sorting=[[7,0]];
$("#mytable").trigger("sorton",[sorting]);
});*/
$("#triggerlink").click(function(){
var t=$("thead tr").children();
$(t[7]).trigger("click");
});
</script>
</body>
<html>
好了，先介绍到这里，更多例子请到官网研究。
ps：tablesorter默认排序的方式好像是按表头内容类型来排的，表头类型为数值时就按数值排，表头为字符串时就按字符串排，可是有时候当一个列中所有的数据都是数字时，理应按数值方式来排，但它却按字符串排，例如升序时，11排在2的前面，降序时，2排在11前面，这个很奇怪，我也遇到过，去官网查也没找到答案，当出现这种情况时，将该列的排序方式指定为currency（货币）方式就行了，如指定第四列按货币方式排列，
3: {sorter: "currency"}[/size][/size]