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" class="tablesorter"> <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://download.csdn.net/detail/itmyhome/7389871

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




版权声明:本文博客原创文章,博客,未经同意,不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459880.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5渲染判断_云渲染怎么收费,5大云渲染平台实测,您选对了吗?

3DMAX云渲染平台都怎么收费&#xff1f;5大云渲染平台测试后才知道差距这么大&#xff0c;您用对了吗&#xff1f;本次共计测试了3个镜头&#xff0c;为了让大家很直观地感受各个平台渲染时间和费用上的对比&#xff0c;我整理了个表格&#xff0c;供大家自行参考和判断。若有疑…

hadoop1常见配置含义

参数 取值 备注 fs.default.nameNameNode 的URI。hdfs://主机名/dfs.hosts/dfs.hosts.exclude许可/拒绝DataNode列表。如有必要&#xff0c;用这个文件控制许可的datanode列表。dfs.replication默认&#…

Android工程的编译过程

现在很多人想对Android工程的编译和打包进行自动化&#xff0c;比如建立每日构建系统、自动生成发布文件等等。这些都需要我们对Android工程的编译和打包有一个深入的理解&#xff0c;至少要知道它的每一步都做了什么&#xff0c;需要什么环境和工具&#xff0c;输入和输出是什…

activiti 工作流设置并行审批_activity、jbpm5、snakerflow常用工作流审批流对比

# 审批流调研背景由于目前产品研发组支持的产品项目越来越多&#xff0c; 同时几乎每个项目都会有导出审批&#xff0c;流程流转等需求&#xff0c;本着提高开发效率和组件化的目的&#xff0c;调研和开发通用的工作流组件&#xff0c;为后面的项目和新的需求提供快速支持。主要…

java 后台开发关键词解释

bean类&#xff1a;是一些实体类&#xff0c;包括viewbean,databean等等。action类&#xff1a;可作为接收显示层的数据&#xff0c;连接显示层和业务逻辑实现层的控制层。model类&#xff1a;MVC中model层就是到层。在java中无特殊含义就是模块。util类&#xff1a;工具类dao:…

docker mysql关掉后启动_Docker启动mysql的坑2

正确启动mysql&#xff1a;docker run -p 3306:3306 --name mysql02 -e MYSQL_ROOT_PASSWORD123456 -d mysql此时虽然启动成功。但是用客户端链接的时候报错连接Docker启动的mysql出现&#xff1a;ERROR 2059 (HY000): Authentication plugin caching_sha2_password cannot be …

Servlet基础知识(二)——web.xml文件的作用

http://www.cnblogs.com/yqskj/articles/2233061.html 转载于:https://www.cnblogs.com/wangerxiansheng/p/4113607.html

Spring web应用最大的败笔

第一篇 介绍下IOC DI Spring主要是业务层框架&#xff0c;现在已经发展成为一个完整JavaEE开发框架&#xff0c;它的主要特点是IoC DI和AOP等概念的融合&#xff0c;强项在面向切面AOP。推出之初因为Ioc/AOP等新设计理念值得框架设计者学习&#xff0c;现在已经成为Java世界主流…

mysql备份的后缀名_mysql备份数据库后缀名

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

如何专注

专注&#xff0c;据说是在这个时代能成功的基础。 看看自己这些分类、专注得了么&#xff1f; 转载于:https://www.cnblogs.com/x3d/p/4117443.html

mysql多主单向环形_mysql多主单向--gt;环形同步_MySQL

bitsCN.com原理&#xff1a;MySQL的Replication是一种多个MySQL的数据库做主从同步的方案&#xff0c;特点是异步&#xff0c;广泛用在各种对MySQL有更高性能&#xff0c;更高可靠性要求的场合。与之对应的另一个技术是同步的MySQL Cluster&#xff0c;但因为比较复杂&#xff…

***PHP 去除换行符

PHP在不同的系统中&#xff0c;换行是不同的 Linux&#xff1a;\n Windows&#xff1a;\r\n mac&#xff1a;\r 所以去除回车换行的方法: 1.使用php定义好的变量&#xff08;比较好的方法&#xff0c;推荐&#xff09; $str str_replace(PHP_EOL, , $str); 2.使用str_replace …

个人代码归档

http://pan.baidu.com/s/1D7Qii 密码&#xff1a;52n3转载于:https://www.cnblogs.com/vvonline/p/4121141.html

mysql current_timestamp 不自动更新_MySQL ON UPDATE CURRENT_TIMESTAMP不更新

我有一张桌子&#xff0c;看起来像这样&#xff1a;CREATE TABLE IF NOT EXISTS Hosts (id int(128) NOT NULL AUTO_INCREMENT,IP varchar(15) NOT NULL DEFAULT ,Port varchar(5) NOT NULL DEFAULT ,Password varchar(32) NOT NULL DEFAULT ,Username varchar(32) NOT NULL DE…

序列for循环语句

序列for循环语句 序列for循环语句允许重复遍历一组序列&#xff0c;而这组序列可以是任何可以重复遍历的序列&#xff0c;如由begin()和end()函数定义的STL序列。所有的标准容器都可用作这种序列&#xff0c;同时它也同样可以是std::string&#xff0c;初始化列表&#xff08;l…

mysql批量用trim限定_如何使用trim()并更新mysql中的所有行[复制]

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

C#中用WMI实现对驱动的查询

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Management; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;namespace WMI_驱动…

01C语言的概述

一、计算机常识在学习C语言之前&#xff0c;先要了解一些计算机常识1.计算机只能识别0和1大家都知道&#xff0c;计算机要通电才能工作&#xff0c;说白了&#xff0c;它跟电视、洗衣机一样&#xff0c;都是电器。电器都有个共同的能力&#xff1a;懂得判断通电还是断电&#x…

mysql5.7物理备份_Mysql5.7—运维常用备份方式

一、 Mysqldump备份结合binlog日志恢复使用mysqldump进行全库备份&#xff0c;并使用binlog日志备份&#xff0c;还原时&#xff0c;可以使用binlog日志恢复到备份前的任意位置或时间1. Binlog简介主要用于主从复制和恢复数据库&#xff0c;使用mysqlbinlog命令查看binlog二进制…

XAMPP on Mac 组态 Virual Host

首先&#xff0c;在hosts文件中添加virtual host域名。方向127.0.0.1 我一般使用的命名约定dev-domainname.comsudo nano /private/etc/hosts # VirtualHosts Mapping 127.0.0.1 dev-domainname.com接下来配置Apache。打开Apache的配置文件 /Applications/XAMPP/etc/httpd.conf…