jQuery 之 tablesort

    最近用到了 jQuery 的一个插件，网方下载地址：http://tablesorter.com/docs/

 

官网上提供了详细的 doc 文档 ， 现在我将 ajax ，分页 ，排序 几个功能整合起来，遇到的一些问题予以总结，以便以后需要重新配置时，不必花费更多的时间 ：

 

1. 根据用户输入的条件（这里是一个时间），得到数据。

function subData(){ var saleDate = $("#sale_date").val(); //得到用户输入的时间 $.ajax({ // 请求的url url : "saleItemsOfDay.action", // 发送方式 type : "post", // 接受数据格式 dataType : "json", // 要传递的数据 data : "_saleDate="+saleDate, // 回传函数 success : listData }); }

 

2. 从 后台 Action 获取到数据后，以 JSON的数据形式返回 ， listData 是对返回后的数据进行操作

function listData(json){ var str ; var result = eval("(" + json + ")"); $("#dayTab tbody").empty(); //每次填充数据前，先清空 table for( var m = 0 ; m < result.length ; m ++ ){ str = "<tr><td>"+result[m].commodityNo+"</td><td>"+result[m].name+"</td><td>"+result[m].counterId+"</td><td>"+result[m].price+" </td><td>"+result[m].saleDate+"</td><td>"+result[m].casher+"</td>"; $("#dayTab tbody").append(str); } $("#dayTab").trigger("update"); //这一步便是 tablesort 的ajax支持，重新将数据填充到 table 后，可以继续点击表头排序 sortTab(); // 分页 }

 

function sortTab(){ $("#dayTab").tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }

这一步需要注意的是 ：    $("#dayTab").trigger("update");        sortTab();  这两句的执行顺序不能换 ！

widgets:['zebra']      //table形成斑马线，css自己定义

 

3.   tablesort 提供了分页的功能 jquery.tablesorter.pager.js ，对于更改默认的 显示记录条数

 

jsp页面：

<select class="pagesize"> <option selected="selected" value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="60">60</option> </select>

更改  jquery.tablesorter.pager.js   文件中

 

this.defaults = { size: 20, offset: 0, page: 0, totalRows: 0, totalPages: 0, container: null, cssNext: '.next', cssPrev: '.prev', cssFirst: '.first', cssLast: '.last', cssPageDisplay: '.pagedisplay', cssPageSize: '.pagesize', seperator: "/", positionFixed: true, appender: this.appender };

 

中的 size

 

4. tablesort 关于 时间的排序

    tablesort 默认时间的排序是排到 秒 ，如果你的时间的格式类似于： 2010-01-01 12:23:32.323  (秒后面还有内容)，则tablesort不能将其排序，所以在构建数据的时候 ，你可以将时间先格式化

CONVERT(varchar(100), SaleDate, 20)  //SQLServer 2005

这样 tablesort 便能将其排序