软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

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]] //初始化表格时第二列按照降序排序,第三列按照升序排列,第四列按照降序排列
        });
     } );