Jquery中TableSorter的简单应用

TableSorter实现客户端报表静态排序，分页。

   注：在报表html的table标签中必须包含thead和tbody

 

官网首页中有个简单的排序例子：

   1.引入了Jquery.js和tablesorter.js。

 

   2.

$(document).ready(function(){
//     myTable是报表的id
       $("#myTable").tablesorter({
//      sortList:[列索引，排序方向]  列索引时从0开始的，排序 0是asc 、1是desc
           sortList: [[1,0],[2,1]],

//      sortForce:[列索引，排序方向]    强制某列排序后不能动,其它列根据该列进行排序      
           sortList:[0,0],

//       列索引: {sorter:"数据类型"}   该列按 “数据类型” 进行排序
           0： {sorter：“integer”}
//       headers： {5： {sorter： false}}  禁止某列排序
           headers：{5： {sorter： false},1:{sorter: false}}
       });
   });

 

 

分页例子：

1.引入jquery和tablesorter的js库之外还需要引入tablesorter.pager.js

 

2.

$(function() {
        $("#myTable").tablesorter(
                 。。。。。。。
              ).tablesorterPager(
                      {container: $("#pager")});
  });

 

<div id="pager" class="pager" align="right">
    <img src="icons/first.png" class="first"/>
    <img src="icons/prev.png" class="prev"/>
    <input type="text" class="pagedisplay"/>
    <img src="icons/next.png" class="next"/>
    <img src="icons/last.png" class="last"/>
    <select class="pagesize">
        <option selected="selected" value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </select>

</div>