Home >Web Front-end >JS Tutorial >jQuery表格排序组件-tablesorter使用示例_jquery

jQuery表格排序组件-tablesorter使用示例_jquery

PHP中文网
PHP中文网Original
2017-03-28 16:12:471342browse

一、引入文件

复制代码 代码如下:







效果如图:
jQuery表格排序组件-tablesorter使用示例_jquery 
二、标准的HTML表格,必须包括thead和tbody标签

复制代码 代码如下:






















...略


Name Sex Address
zhangsan boy beijing
lisi girl shanghai


三、设置table可排序

复制代码 代码如下:


$(document).ready(function(){
//第一列不进行排序(索引从0开始)
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();
});


官方文档:http://tablesorter.com/docs/

补充说明:

在使用过程遇到的一个问题,我的表格数据是通过ajax获取的,首页进行排序的时候没问题

当进行下一页排序的时候,会把上页的数据也重新显示出来,解决这个问题可以在你ajax获取数据之后

触发"update"事件,代码如下:

复制代码 代码如下:


$(".tablesorter").trigger("update");


以上问题着实头疼了很久,刚开始用的官网上的Pager plugin,发现这个不太合适。

又网上查资料 整理以下代码:

复制代码 代码如下:


$(".tablesorter tbody tr").addClass("delete");
$(".tablesorter tbody tr.delete").remove();
$("table tbody").append(html);
$(".tablesorter").trigger("appendCache");
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);


于是都用上了,久经测试 发现只有$(".tablesorter").trigger("update");这一句能解决问题

其他的不知道是什么东东。

所需文件下载地址:http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip

style.css及图片在themes\blue路径下。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn