代码人生的小狗窝

一行行枯燥的代码,却描绘出人生的点点滴滴

您现在的位置是:首页>_Web前端

用jQuery+Tablesorter兑现客户端分页与排序

发布时间:2018-05-28浏览(3118)

    用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]