jQuery tablesorter使用一二三

   今天由于业务需要，要在客户端对一个报表进行排序，所以就想到了jquery插件，下面简单介绍一下配置步骤，备忘：

 1、下载jquery-latest.js和jquery.tablesorter.js包，如果想让报表更美观，也可以下载官方推荐的几款布局文件。

 2、将1下载的包放到报表页面项目某一目录下，我是在页面当前目录下新建了一个js目录，将jquery-latest.js和jquery.tablesorter.js放到里面，另外新建了一个自己的custom.js用来写客户端代码，同时我也建了一个css目录用来为报表页面更换皮肤，里面放了blue、green等不同的皮肤。

 3、报表页面引入资源文件

    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <link rel="stylesheet"  type="text/css" href="css/blue/style.css">

4、表格加上class="tablesorter"，另外比较重要的就是要加上thead和tbody标签，thead标签里的tr标签要加上class="header"才能控制显示皮肤图片，切忌。

5、在custom.js中编写对报表的基本要求，比如每一列按照什么数据类型排序，哪几列初始化时升序或者降序排列等等，注意列的索引是从0开始的，简单贴一点代码以明义：

     $(document).ready(function(){
        $("#mytable").tablesorter({ //mytable是报表table的id
            1: {sorter:"integer"}, //表格的第二列按照integer数据类型进行排序
            2: {sorter:"integer"},
            3: {sorter:"double"},
            sortList: [[1,1],[2,0],[3,1]] //初始化表格时第二列按照降序排序，第三列按照升序排列，第四列按照降序排列
        });
     } );

评论

2 楼 ForgiDaved 2014-05-27  

世界太假我们太傻 写道

请问一下，为什么改变不了样式，当点击表头的时候改变图片怎么弄？？？

   你所指的点击表头改变图片是指排序的箭头还是指啥？如果是排序箭头，请仔细检查你的配置，如表格table是否添加了tablesorter class属性等。如还是不能解决，请留言再讨论。

1 楼 世界太假我们太傻 2014-04-16  

请问一下，为什么改变不了样式，当点击表头的时候改变图片怎么弄？？？