javascript 表格排序和表头浮动效果(扩展SortTable)

 更新时间:2009年04月07日 23:09:48   作者:  
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的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://img.jb51.net/online/sorttable/sorttable.rar

相关文章

  • 使用js修改客户端注册表的方法

    使用js修改客户端注册表的方法

    这篇文章介绍了使用js修改客户端注册表的方法,有需要的朋友可以参考一下
    2013-08-08
  • JS实现前端页面的搜索功能

    JS实现前端页面的搜索功能

    这篇文章主要介绍了JS实现前端页面的搜索功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • 原生JS+Canvas实现五子棋游戏

    原生JS+Canvas实现五子棋游戏

    这篇文章主要为大家详细介绍了原生JS+Canvas实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序开发探究

    微信小程序开发探究

    这篇文章主要介绍了微信小程序开发探究,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    这篇文章主要介绍了JS右下角广告窗口代码,具有浮动显示、可收缩、展开及关闭等功能,涉及javascript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • uniapp自定义应用退出执行内容实例代码

    uniapp自定义应用退出执行内容实例代码

    近几日使用uni-app开发移动应用APP遇到了个不常见的需求,下面这篇文章主要给大家介绍了关于uniapp自定义应用退出执行内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JS在Canvas元素内绘制钟表

    JS在Canvas元素内绘制钟表

    这篇文章介绍了JS在Canvas元素内绘制钟表的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • webpack多页面开发实践

    webpack多页面开发实践

    这篇文章主要介绍了webpack多页面开发实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • function foo的原型与prototype属性解惑

    function foo的原型与prototype属性解惑

    最近在研究js,疑惑也比较多。主要是被原型这个东西给弄迷糊了。
    2010-11-11
  • 九种原生js动画效果

    九种原生js动画效果

    这篇文章主要介绍了九种原生js动画效果,个个都非常精彩,都值得大家学习,需要的朋友可以参考下
    2015-11-11

最新评论