tableSorter使用介绍

技术2022-05-20 51

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", //指定一个唯一的IDis: 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"}

专利

最新回复(0)