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路径下。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
jQuery表格排序总成-tablesorter的更多相关文章
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
- jQuery表格排序组件-tablesorter
一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...
- jQuery表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
- jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- 表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
- jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- 前端页面表格排序 jQuery Table 基础
通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...
- jQuery 表格
jQuery 表格插件汇总 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- IOS私人API用法
先要使用class-dump 和dumpFrameworks.pl 工具 将ios的framework导出来. 下面是工具的下载地址: class-dump下载地址http://www.codethe ...
- Basic脚本解释器移植到STM32
本文来自http://blog.csdn.net/hellogv/ .引用必须注明出处! 上次讲了LUA移植到STM32.这次讲讲Basic脚本解释器移植到STM32. 在STM32上跑Basic脚本 ...
- Windows 8 应用开发 - 应用栏
原文:Windows 8 应用开发 - 应用栏 通过应用栏(AppBar)可以在需要时向用户显示各种应用命令.应用栏提供与用户当前页面或当前选定的内容相关的各种命令.默认情况下,应用栏处于隐 ...
- 快速排序java
快速排序(Quicksort)是对冒泡排序的一种改进.它是先在数组中找到一个关键数,第一趟排序将比关键数小的放在它的左边,比关键数大的放在它的右边.当第一趟排序结束后,再依次递归将左边和右边的进行排序 ...
- 解决 下载 CM-12.0 源代码出现 Fatal: duplicate project .....问题
在使用 repo init -u git://github.com/CyanogenMod/android.git -b cm-12.0 初始化代码库的时候出现如下错误: fatal: manifes ...
- RabbitMQ与java、Spring结合实例详细讲解(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文介绍了rabbitMq,提供了如何在Ubuntu下安装RabbitMQ 服务的方法. ...
- SQL 修改排序规则的问题 sql_latin1_general_cp1_ci_as
在一个项目中遇到:用原来的数据库生成的脚本,然后部署到新的服务器上,数据库的SQL_Latin1_General_CP1_CI_AS 怎么查询出来汉字都是乱码了. 遂查解决方法. 需要执行这个 ALT ...
- Hive自己定义函数的使用——useragent解析
想要从日志数据中分析一下操作系统.浏览器.版本号使用情况.可是hive中的函数不能直接解析useragent,于是能够写一个UDF来解析.useragent用于表示用户的当前操作系统,浏览器版本号信息 ...
- 制作简易计算器处理过程Servlet
CalculationServlet.java: package com.you.servlet; import java.io.IOException; import java.io.PrintWr ...
- mod_python模块安装
两.mod_python 1.性能 使用mod_python的主要优势在于比传统CGI更高的性能. 一个測试,使用在Pentium 1.2GHz的机器上执行Red Hat Linux 7.3.使用4种 ...