一个、进口单证

<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的更多相关文章

  1. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  2. jQuery表格排序组件-tablesorter

    一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...

  3. jQuery表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  4. jquery 表格排序,实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  5. 表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  6. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  7. 前端页面表格排序 jQuery Table 基础

    通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...

  8. jQuery 表格

    jQuery 表格插件汇总     本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...

  9. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. 【解决】/usr/bin/ld: cannot find -lc

    现象:运行gcc静态编译程序时报错: /usr/bin/ld: cannot find -lc collect2: ld returned 1 exit statusmake: *** [gcc_dr ...

  2. Cocos-2dx-Lua中使用Luaj的完整示例(转)

    如何使用Luaj进行java与Lua之间的交互调用 一.主要分为两个大步骤,Lua工程的修改,android工程的修改 二.工程环境 开发工具:Cocos-Code-IDE Lua版本 : Lua 5 ...

  3. HDU 3681 BFS&amp;像缩进DP&amp;二分法

    N*M矩阵.从F出发点.走完全部Y点.每个人格开支1电源点,去G点,电池充满,D无法访问.最小的开始问什么时候满负荷可以去完全部Y.Y和G总共高达15一 第一BFS所有的F.Y.G之间的最短距离. 然 ...

  4. Blend4精选案例图解教程(三):一键拖拽

    原文:Blend4精选案例图解教程(三):一键拖拽 拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一 ...

  5. 高质量c c++编程

    第1章 文件结构 每一个C++/C程序通常分为两个文件.一个文件用于保存程序的声明(declaration),称为头文件.还有一个文件用于保存程序的实现(implementation),称为定义(de ...

  6. hdu2377Bus Pass(构建更复杂的图+spfa)

    主题链接: 啊哈哈,点我点我 思路: 题目是给了非常多个车站.然后要你找到一个社区距离这些车站的最大值最小..所以对每一个车站做一次spfa.那么就得到了到每一个社区的最大值,最后对每一个社区扫描一次 ...

  7. 7 JavaScript Basics Many Developers Aren't Using (Properly)【转】

    JavaScript, at its base, is a simple language that we continue to evolve with intelligent, flexible ...

  8. 基于最简单的FFmpeg的AVDevice抽样(屏幕录制)

    =====================================================基于最简单的FFmpeg的AVDevice样品文章: 最简单的基于FFmpeg的AVDevic ...

  9. Oracle 如何提交手册Cluster Table事务

    环境遇到ora-00600 4000错误,该目的是参与cluster table,什么我这里有以下简单的模拟.以供参考! ++++创建一个测试表 ? 1 2 3 4 5 6 7 8 9 10 11 1 ...

  10. Nginx + IIS

    Nginx + IIS 配置,实现负载均衡   当你的Web应用程序访问量大的时候,一台服务器可能会因为压力过大而无法处理所有的请求.此时,可以增加服务器,采用负载均衡来分担所有的请求.关于Nginx ...