javascript 表格排序和表头浮动效果(扩展SortTable)
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了表头浮动效果及一些小功能。
一、SortTable说明
SortTable
version 2
7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
Instructions:
Download this file
Add <script src=”sorttable.js”></script> to your HTML
Add class=”sortable” to any table you'd like to make sortable
Click on the headers to sort
Thanks to many, many people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: do what you want with it.
用法:将要排序的表格添加CSS,如<table class=”sortable”>
默认对所有列都会添加排序功能,对于不需要排序的列可添加CSS:”sorttable_nosort”,如<td class=”sorttable_nosort”></td>
二、更新说明
Update:
version 2.1
9th Mar 2009
Hopesoft , http://www.51ajax.com/blog/
说明:
1.增加中文排序
2.增加指定各行使用不同css样式功能(比如奇偶行背景色不一致)
用法:在要表头浮动的表格上添加属性,如<table class="sortable" rowclass="bg1,bg2,bg3">
3.增加表头浮动功能(支持同一个页面有多个表格,比如不同Tab标签下的各个表格)
用法:在要表头浮动的表格上添加CSS,如<table class="scrolltable">
另外最好指定“表头”和“数据行”的各列的列宽,如
<tr><td class='w1'>姓名</td><td class='w2'>年龄</td></tr>
<tr><td class='w1'>张三</td><td class='w2'>21</td></tr>
以避免在FireFox下表头浮动时表头各列与数据各列不对齐
4.增加页面载入后自动排序
用法:在表格上添加属性autosortcol,对应要自动排序的列号,注意是从0开始
如<table class="sortable" autosortcol="3">,则表示当页面载入成功后,会自动对第4行进行
新增的代码都用中文做了注释,屏蔽了原有代码中部分代码。另外原来代码中升降序顺序ms是反的,我这边做了更改。
演示地址 http://img.jb51.net/online/sorttable/sorttable.htm
打包下载地址: http://files.cnblogs.com/files/chenjian/sorttable.zip
javascript 表格排序和表头浮动效果(扩展SortTable)的更多相关文章
- JavaScript写一个表格排序类
依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...
- Javascript 广告浮动效果在浏览器中间N秒后移动到右下角
Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript
- 分享12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
- bootstrap 冻结表格,冻结表头
需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...
- JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...
- 12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...
- ajax json 表格排序,分页,自己定义每页数量
ajax json 表格排序.分页,自己定义每页数量 点击表头能够排序.依照升序或者降序,另外支持多列排序 设置每页数量 演示 XML/HTML Code <table id='examp ...
- jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
- JS对表格排序(支持对序号,数字,字母,日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...
随机推荐
- 《算法》第四章部分程序 part 4
▶ 书中第四章部分程序,加上自己补充的代码,图的深度优先遍历 ● 无向图的深度优先遍历,有向 / 无向图代码仅若干方法名不同,包括递归和非递归版本,去掉了顶点有效性的检查 package packag ...
- 1. ibatis 查询的sql列存在相同的列名
如果SQL语句存在两个相同的查询列名,则映射时,取第一个列名的值进行映射 <?xml version="1.0" encoding="UTF-8" ?&g ...
- 40. 数据泵导入导出impdp、expdp
一.查看管理理员目录(同时查看操作系统是否存在,因为Oracle并不关心该目录是否存在,如果不存在,则出错)select * from dba_directories; 二.创建逻辑目录,该命令不会在 ...
- postgresql----COPY之表与文件之间的拷贝
postgresql提供了COPY命令用于表与文件(和标准输出,标准输入)之间的相互拷贝,copy to由表至文件,copy from由文件至表. 示例1.将整张表拷贝至标准输出 test=# cop ...
- 白鹭引擎 - 碰撞检测 ( hitTestPoint )
1, 矩形碰撞检测 class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须 ...
- new date() 计算本周周一日期
new date() 计算本周周一日期 需求:计算某天的那一周周一的日期 1.new Date() date.getDay(); //获取周几 0-6 date.getTime();//获取时间戳 1 ...
- 关于 Level 和 Promotion,其实就那么简单
曾经有读者和朋友问我:一般硅谷工作了三四年以后,会是什么 level?找工作会拿到什么 package?拿到这个问题之后,我想了想,还是没有回答.其实三四年的时间,对于曾经在同一个起点的两个人,因为际 ...
- 机器学习入门-数值特征-数据四分位特征 1.quantile(用于求给定分数位的数值) 2.plt.axvline(用于画出竖线) 3.pd.pcut(对特征进行分位数切分,生成新的特征)
函数说明: 1. .quantile(cut_list) 对DataFrame类型直接使用,用于求出给定列表中分数的数值,这里用来求出4分位出的数值 2. plt.axvline() # 用于画 ...
- Python_02 基本数据类型、while循环
1.基本数据类型 1.字符串(引号内): name=“我是Manuel” name='我是Manuel' name="""Manuel""" ...
- css样式表1
1内联样式表 和html联合使用,控制精确,但是可重用性差,冗余多. <p style="font-size:14px;"></p> <div sty ...