jQuery表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"></script>
2.在.js文件中加载tablesorter:
$("table tbody").append(html);
$("table").trigger("update"); table是js自动生成的,需要在生成时添加这句
3.在.js文件中对需要排序的表格调用tablesorter()方法:
$('#tresult').tablesorter({headers:{0:{sorter:false}}}); #不能对第一列进行排序
$(document).ready(function() {
$("table").tablesorter();
$("#append").click(function() {
// add some html
var html = "<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>";
html += "<tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr><tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>";
html += "<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";
// append new html to table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
return false;
});
});
http://plugins.jquery.com/tablesorter/ (download tablesorter.js)
from:http://tablesorter.com/docs/example-empty-table.html#
jQuery表格排序(tablesorter)的更多相关文章
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
- jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- jQuery表格排序总成-tablesorter
一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...
- jQuery表格排序组件-tablesorter
一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...
- jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- 表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
- 前端页面表格排序 jQuery Table 基础
通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进 ...
- jQuery 表格
jQuery 表格插件汇总 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- C#数据仓储类
https://ninesky.codeplex.com/SourceControl/latest /*============================== 版本:v0.1 创建:2016.2 ...
- C# 1.0 到 4.0 的进化 1
定义一个产品类 Product C# 1 using System; using System.Collections; namespace C1 { public class Product { s ...
- 深入Spring:自定义事务管理
转自: http://www.jianshu.com/p/5347a462b3a5 前言 上一篇文章讲了Spring的Aop,这里讲一下Spring的事务管理,Spring的事务管理是建立在Aop的基 ...
- Css相册
对于相册,大家都很熟悉,常见的一种如下图所示: 当你点击下面的数字的时候,就会换一张图片,直接用链接就可以实现,很简单.下面我们将介绍其他两种css相册. 第一种css相册: 我们先来看看示意图: 当 ...
- 当DataTable的列名遇上特殊字符"["和"]"时
刚才有看到一个问题http://bbs.csdn.net/topics/390781072.是在DataTable获取某列最小值,但是在动态生生DataTable时,列名有遇上特特殊字符"[ ...
- 在Android开发中替换资源图片不起作用的解决方法
现象 在android开发中,经常会需要替换res\drawable中的图片,打开res\layout下的文件预览布局页面发现图片已经被替换,但在模拟器或者真实机器上运行时发现该图片并没有被替换,还是 ...
- 常见的NoSQL数据库
NoSQL数据库发展迅猛,据说现在已经有上百种NoSQL数据库了,下面来了解下常见的一些NoSQL数据库 先来看张表,了解下典型的NoSQL数据库的分类 临时性键值存储 永久性键值存储 面向文档的数据 ...
- JAVA设计模式详解(五)----------适配器模式
各位朋友好,本章节我们继续讲第五个设计模式. 在生活中,我们都知道手机内存卡是无法直接接电脑的,因为内存卡的卡槽比较小,而电脑只有USB插孔,此时我们需要用到读卡器.这个读卡器就相当于是适配器.这是生 ...
- POJ2195&&HDU1533(KB11-D 最小费用最大流)
Going Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 23515 Accepted: 11853 Desc ...
- 分页插件 jquery.pagination.js
引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...