tablesorter插件的使用

在表格中，有时候需要排序的功能。网上用的多的是tablesorter。那么就用tablesorter吧。然后，就开始做了。然后，就会有一个有一个的问题。

1，tablesorter有官网没，有文档没，怎么下，怎么用。

2，我想要table的第一列不参与排序。或某一列几列才参与排序。

3，我想要table的最后一行不参与排序或某一行不参与排序。

4，tablesorter的默认样式太丑了。而表示降序升序的三角图标还蛮好看的。我只想要这个图标，不要其他的又该如何。

5，tablesorter的常见排序规则。

6，tablesorter是否可以自定义排序方式。

7，tablesorter是否可以多列排序。就是多列与。

8，table动态更新，或翻页。

那么，就围绕上边的问题一个一个的来解决。

可以去这里 http://plugins.jquery.com/tablesorter/或https://github.com/Mottie/tablesorter下载。文档这里有https://mottie.github.io/tablesorter/docs/
可以初步看下demo。然后去bootcss里找到tablesorter的cdn。就是 http://www.bootcdn.cn/jquery.tablesorter/

看着demo，按照demo的格式，套一套自己的table就可以功能实现了。记得初始化一下。

$("#mytable").tablesorter();

table的列是否参与排序可以使用:

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

如果想第几列不参与排序，就修改headers里边的index对应的值为false。

table的最后一行不参与排序。可以新建一个tfoot标签，将tr，td，th啥的包含进来。就可以脱离tbody的排序。

为了快速的尝试下效果，你可以用cdn的js以及css。你会发现table页面比较丑，没有自己定义的好看。于是，你就不想用它的样式。那么，可以通过审查元素，查看对比th的样式规律，可以找到了定义th三角等样式的地方。定义了三种状态的样式。未排序，降序，升序。于是把这几个类独自抽出来就可以了。这样就不会坏了心情。

            .table>thead>tr .tablesorter-headerUnSorted:not(:first-child)
            {
                background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
                background-position: center right;
                background-repeat: no-repeat;
                cursor: pointer;
                white-space: normal;
                padding: 4px 20px 4px 4px;
            }    
            
            .table>thead>tr .tablesorter-headerAsc:not(:first-child)
            {
                background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
                background-repeat: no-repeat;    
                background-position: center right;
                cursor: pointer;
                white-space: normal;
            }
            
            .table>thead>tr .tablesorter-headerDesc:not(:first-child)
            {
                background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
                background-repeat: no-repeat;
                background-position: center right;
                cursor: pointer;
                white-space: normal;
            }

tablesorter的排序规则值有”false”，”text”,”digit”,”integer”,”double”这些。

可以通过addParser的format方式来自定义排序顺序。比如青年，中年，老年。在没有具体年龄的情况下，可以通过自定义函数来排序。

$('.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方式排序