当前位置: 首页 > 编程笔记 >

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

蒲深
2023-03-14
本文向大家介绍jQuery表格排序组件-tablesorter使用示例,包括了jQuery表格排序组件-tablesorter使用示例的使用技巧和注意事项,需要的朋友参考一下
一、引入文件
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<!-- 引入以下样式则表头出现排序图标,同时引入图片 --> 
<link href="css/style.css" rel="stylesheet" type="text/css" > 

效果如图:
 
二、标准的HTML表格,必须包括thead和tbody标签
<table id="myTable"> 
<thead> 
<tr> 
<th>Name</th> 
<th>Sex</th> 
<th>Address</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>zhangsan</td> 
<td>boy</td> 
<td>beijing</td> 
</tr> 
<tr> 
<td>lisi</td> 
<td>girl</td> 
<td>shanghai</td> 
</tr> 
<tr> 
...略 
</tr> 
</tbody> 
</table> 

三、设置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路径下。
 类似资料:
  • 本文向大家介绍jQuery实现的表格前端排序功能示例,包括了jQuery实现的表格前端排序功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考,具体如下: 表格前端按列排序 依赖jQuery(本例使用jQuery-1.8.2) 1.初始化方法 2.页面函数 3.DOM结构 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《

  • 本文向大家介绍基于jQuery实现表格的排序,包括了基于jQuery实现表格的排序的使用技巧和注意事项,需要的朋友参考一下 主要思路:   因为JS有SORT的方法,对数组进行排序,那么通过个方法,我们就会想到数组了。   1.点标表格标头的时候,取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。   2.对表格的数据部分,也就是tbody部分,进行点击的列

  • 本文向大家介绍TableSort.js表格排序插件使用方法详解,包括了TableSort.js表格排序插件使用方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍tablesorter.js表格排序使用方法(支持中文排序),包括了tablesorter.js表格排序使用方法(支持中文排序)的使用技巧和注意事项,需要的朋友参考一下 最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: 修改后: 修改完之后的js可支持中文的排序。 2.建

  • 问题内容: 我正在寻找一种表排序解决方案(使用JavaScript),但似乎还找不到合适的解决方案。我只需要按字母顺序对每一列进行排序。它不需要忽略任何代码或任何数字或使用货币。只需单击列标题即可将其从排序的z / za中切换出来。 有人知道这样一个非常简单的解决方案吗? 问题答案: 纯Javascript(ES6) 进行字母和数字排序-升序和降序 可在 Chrome , Firefox , Sa

  • Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 主要的特点包括: 多列排序 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 支持第二个隐藏域排序 可扩展外观 程序简小,打包后只有 7.4K 程序效果: