zoukankan html css js c++ java

tableSorter使用介绍

原文：http://hi.baidu.com/lbhlamp/blog/item/439666ee935b992d62d09ffb.html

最近在公司的项目中需要对表格进行排序，上网找了一下，感觉感觉tablesorter不错，但官网上的介绍很少，而且没有中文手册，很多地方都不明不白。。。结合官网的例子，自己摸索了一下，还真整出来了，呵呵，下面介绍一下常用的方法：

tablesorert官网http://tablesorter.com

jquery官网http://jquery.com/

先建立一个表格，代码如下，jquery-1.3.2.min.js，jquery.tablesorter.min.js请自行到官网下载

效果如下：

下面就开始写js，让点击表头时，能够排序，其实很简单，一句代码就足够了，很好很强大呵呵，在上面的代码中加入

这时，点击表头，例如年龄，是不是发现此时的表格已经按年龄的升序来排了，再点一次就变成降序了~~效果如下图

现在排序已经做好了，但是实际上我们并不需要表头里所有的列都能排序啊，例如我们不需要地址的排序，怎么去掉它呢？很简单~只需在tablesoter里设置地址所在的列（地址为5）排序（sorter）为false就行了，代码如下：

$("#mytable").tablesorter({headers:{5:{sorter:false}}});

这时再点击地址，发现该列的排序功能已经失效了~

再定义一下表头的样式：

thead{
background:#555555;
color:#ff0000;
}

降序时样式：

th.headerSortDown{
color:#00ff00;
}

升序时样式：

th.headerSortUp{
color:#0000ff;
}

此时整个页面代码如下：

效果如图：

现在我们点击年龄等级，我们希望的顺序是少、青、中、老或者老、中、青、少这样排，但却发现排序的方式跟我们希望的不一样，这怎么办呢？替换，将中文替换成数字，我们通过数字排序来控制中文排序，代码如下：

$.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>

<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"}

查看全文

相关阅读:
WDA学习（14）：Colors Cell and Input Enable to ALV Column
JavaScript try-catch语句（错误处理）
constructor
input file 重复上传同一张图片失效的解决办法
 input下拉带输入框
 box-shaw四边阴影详解
 苹方字体合集
 两个div不同高度并排显示
 弹窗库
 webstorm破解安装版本

原文地址：https://www.cnblogs.com/dwnblogs/p/2900784.html