tablesorter周边文档
一、简介:
Tablesorter作用于一个标准的HTML表格(有THEAD,TBODY),实现静态排序;主要特点包括:
(1) 多列排序;
(2) 支持文本、URI地址、数值、货币、浮点数、IP地址、日期、时间以及自定义类型排序;
(3) 支持第二个隐藏域排序,例如保持按字母排序时的排序对其他标准(支持两个);
(4) 可扩展外观;
(5) 程序简小;
(6) 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性;
(7) 浏览器支持:IE6+,FF2+,Safari2.0+,Opera9.0+;
必需:jquery.js、jquery.tablesorter.js
可选:jquery.metadata.js 元数据;jquery.tablesorter.pager.js 分页;
主题:Green Skin、Blue Skin
二、实例
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="jquery.tablesorter.js"></script>
3
4 <script type="text/javascript">
5 $(document).ready(function() {
6 $("#sortTable").tablesorter();
7 });
8 </script>
9
10 <table id="sortTable" class="tablesorter">
11 <thead>
12 <tr>
13 <th>name</th>
14 <th>sex</th>
15 <th>Email</th>
16 <th>age</th>
17 <th>Web Site</th>
18 </tr>
19 </thead>
20 <tbody>
21 <tr>
22 <td>张三</td>
23 <td>男</td>
24 <td>jsmith@gmail.com</td>
25 <td>28</td>
26 <td>http://www.zhangsan.com</td>
27 </tr>
28 <tr>
29 <td>耿耿</td>
30 <td>女</td>
31 <td>fbach@yahoo.com</td>
32 <td>20</td>
33 <td>http://www.gg.com</td>
34 </tr>
35 <tr>
36 <td>周星星</td>
37 <td>男</td>
38 <td>jdoe@hotmail.com</td>
39 <td>30</td>
40 <td>http://www.zxx.com</td>
41 </tr>
42 </tbody>
43 </table>
其他实例:
(1)设置默认执行列
eg:按照第一列和第二列升序
1
|
$("#sortTable").tablesorter( {sortList: [[0,0], [1,0]]} ); |
元数据方法:
1
|
< table id="sortTable" class="tablesorter {sortlist: [[0,0],[1,0]]}"> |
(2)禁用排序:某些列不支持排序,第一列下标为0
1
2
3
4
5
6
|
$("#sortTable").tablesorter({ headers: { 1: {sorter: false}, 2: {sorter: false} } }); |
元数据方法:
1
|
< th class="{sorter:false}"></ th > |
(3)表格之外的链接排序
1
2
3
4
5
6
7
8
|
$("#sortTable").tablesorter(); $("#trigger-link").click(function() { var sorting = [[0,0],[2,0]]; $("table").trigger("sorton",[sorting]); return false; }); < a href="javascript:void(0);" id="trigger-link">trigger-link</ a > |
(4)改变多列排序的key,默认是shift
1
2
3
|
$("#sortTable").tablesorter({ sortMultiSortKey: 'altKey' }); |
(5)增加记录或动态加载记录
1
2
3
4
|
$("table tbody").append(html); $("#sortTable").trigger("update"); var sorting = [[2,1],[0,0]]; $("#sortTable").trigger("sorton",[sorting]); |
(6)自定义解析器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$("#sortTable").tablesorter({ headers: { 6: {sorter:'grades' } } }); $.tablesorter.addParser({ id: 'grades', is: function(s) { return false; }, format: function(s) { // 格式化数据,按照bad,medium,good升序 return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); }, // set type, either numeric or text type: 'numeric' //数字排序 }); |
(7)自定义控件
1
2
3
4
5
6
7
8
9
10
|
$.tablesorter.addWidget({ id: "repeatHeaders", format: function(table) { //…... } }); $("#sortTable").tablesorter({ //zebra是默认的,repeatHeaders是自定义的; widgets: ['zebra','repeatHeaders'] }); |
(8)分页插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
< link rel="stylesheet" href="jquery.tablesorter.pager.css" type="text/css" /> < script type="text/javascript" src="jquery.tablesorter.pager.js"></ script > < script type="text/javascript"> $(document).ready(function() { $("sortTable").tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }) </ script > < div id="pager" class="pager"> < form > < img src="../addons/pager/icons/first.png" class="first"/> < img src="../addons/pager/icons/prev.png" class="prev"/> < input type="text" class="pagedisplay"/> < img src="../addons/pager/icons/next.png" class="next"/> < img src="../addons/pager/icons/last.png" class="last"/> < select class="pagesize"> < option selected="selected" value="10">10</ option > < option value="20">20</ option > < option value="30">30</ option > < option value="40">40</ option > </ select > </ form > </ div > |
三、属性
Property |
Type |
Default |
Description |
sortList |
Array |
null |
列的排序和方向数组:[[columnIndex, sortDirection], ... ]; columnIndex从0开始,从左到右依次增加; sortDirection为0表示升序,为1表示降序; |
sortMultiSortKey |
String |
shiftKey |
用于多列排序,按住shiftkey键可以再之前基础上在排序,默认shiftkey,可以修改为其他键; |
textExtraction |
String Or Function |
simple |
限定使用哪一种方法用于提取表格单元格数据进行排序;内置选项有simple和complex, 例如<td><strong><em>123 Main Street</em></strong></td>需要使用complex; 但complex在数据很多时会比较慢,因此可以自定义方法,例如myTextExtraction: var myTextExtraction = function(node){ |
headers |
Object |
null |
控制每列的格式,headers: { 0: { option: setting }, ... } |
sortForce |
Array |
null |
为用户的动态选择附加一个强制排序,例如: sortForce: [[0,0]]表示第一列强制排序,选择另一列排序时, 是在第一列的升序基础上排序的; |
widthFixed |
Boolean |
false |
标识固定宽度列 |
cancelSelection |
Boolean |
true |
标识需要禁用的所选择的表头文本 |
cssHeader |
String |
"header" |
th.header {} 表头样式 |
cssAsc |
String |
"headerSortUp" |
th.headerSortUp {} 升序 |
cssDesc |
String |
"headerSortDown" |
th.headerSortDown {} 降序 |
四、其他(修改tablesorter.js文件)
(1)中文排序未按照首字母排序
修改makeSortFunction(type, direction, index)方法,首先增加参数table,用来读取“table”对象config属性的sortLocaleCompare值,如果此值被赋值为“true”则使用汉语排序规则,如果被赋值为“false”则使用英文排序规则。 编辑makeSortFunction方法中如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
if (type == 'text' && direction == 'asc') { if(table.config.sortLocaleCompare){ return a+".localeCompare("+ b + ");"; }else{ return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + a + " < " + b + ") ? -1 : 1 )));"; } } else if (type == 'text' && direction == 'desc') { if(table.config.sortLocaleCompare){ return b+".localeCompare("+ a + ");"; }else{ return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + b + " < " + a + ") ? -1 : 1 )));"; } } |
(2)过滤某些行不参与排序
修改buildCache(table)方法,编辑代码段:(实例为class为children的不参与排序)
1
2
3
4
5
|
if (c.hasClass(table.config.cssChildRow)||c.hasClass('children')) { cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c); // go to the next for loop continue; } |
转自:http://www.cnblogs.com/BlackElf/p/5634974.html
tablesorter周边文档的更多相关文章
- JSP利用freemarker生成基于word模板的word文档
利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...
- 第六十四节,html文档布局元素
html文档布局元素 学习要点: 1.文档元素总汇 2.文档元素解析 本章主要探讨HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快.让整个布局元 ...
- spring boot / cloud (三) 集成springfox-swagger2构建在线API文档
spring boot / cloud (三) 集成springfox-swagger2构建在线API文档 前言 不能同步更新API文档会有什么问题? 理想情况下,为所开发的服务编写接口文档,能提高与 ...
- THML文档布局元素
学习要点: 1.文档元素总汇 2.文档元素解析 一.文档元素总汇 文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. 元素名称 ...
- 一些应该使用mongodb或者其他文档存储而不是redis或mysql、oracle json的情形(最近更新场景)
通常来说,我们应该使用应用的特性而不是自己的爱好或者规定而去选择一种合适的组件,选择的标准应该是这个组件最适合或者本身其设计就是为了解决这个问题,而不是这个组件能够做这事情为标准.就拿存储来说,任何时 ...
- SEER流量众筹模块开发测试网络及使用文档发布
SEER利用区块链奖励机制,可解决传统体育赛事痛点,提高行业运转效率.比如提高赛事方收入,让观众自由选择想看的比赛,给予赛事众筹的参与者贡献影响力,使其获得由智能合约量化的激励等.此功能可广泛应用于包 ...
- html5权威指南:组织内容、文档分节
HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第九章:组织内容 ...
- graphql-inspector graphql schema比较&&文档校验&&查找破坏性变动工具
graphql-inspector 是一个方便的graphql 周边工具,可以加速graphql 应该的开发,同时可以帮助我们排查问题 包含以下特性: 进行schema 的比较 文档校验(通过sche ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
随机推荐
- Lazy Scheduler
Lazy Scheduler:我的轻量级任务调度框架 一.背景 工作中经常涉及任务调度,一直都是采用while(true) => if hitted DO => Thread.Slee ...
- Leetcode: Subsets & SubsetsII
Subsets Description: Given a set of distinct integers, S, return all possible subsets. Note: Element ...
- 反向代理-- WEB服务的加速器[转]
昨天j.L问我http cache怎么设置,当时脑子有点糊涂,一时没想到其实他问的就是反向代理如何设置. 首发:PHP CUP xiaobao 什么是反向代理?反 向代理就是代理服务器(如ISA.Sq ...
- 使用 Aspose.Cells 实现 excel导入
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- URL 调度器(URL dispatcher)
URL 调度器(URL dispatcher) 在刚开始接触 django 的时候, 我们尝试着从各种入门文档中创建一个自己的 django 项目, 需要在 mysite.urls.py 中配置 UR ...
- 反向代理(Reverse Proxy)
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
- 去除scons构建动态库的前缀lib
如何使用scons构建工程,请参考快速构建C++项目工具Scons,结合Editplus搭建开发环境. 编译SharedLibrary项目的时候,生产的so文件时自动加上lib, 例如: env = ...
- WebView 实现MiniBrowser
package org.hjw.minibrowser; import android.os.Bundle; import android.app.Activity; import android.v ...
- D3D游戏降帧的动态创建D3D设备以及ShellCode HOOK玩法
欢迎转载,转载请注明出处:http://blog.csdn.net/gnorth/article/details/9327971 说白了,也就是HOOK掉Present,这种代码,其实百度上某些地方有 ...
- Wireshark抓包介绍和TCP三次握手分析
wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...