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

前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了表头浮动效果及一些小功能。

Demo页:http://www.hopesoft.org/demo/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.hopesoft.org/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.增加页面载入后自动排序
默认是对第一个要排序的表格的第一列做排序

新增的代码都用中文做了注释,屏蔽了原有代码中部分代码。

希望对大家能有帮助,在使用中如有问题可在此留言。

表格排序和表头浮动效果(扩展SortTable)》上有19条评论

  1. 请问可不可以改一下,让我的表单内的某一列内的数据,不跟着其它列排序!

  2. 一个问题,浮动表头在IE7中,无法和下面的列对齐,请问是怎么回事?可以调整吗?怎么调整?

  3. 2.增加指定各行使用不同css样式功能(比如奇偶行背景色不一致)
    用法:在要表头浮动的表格上添加属性,如
    可以自定义样式吗?
    比如把bg1,bg2,bg3改成自定义的颜色

  4. 您的评论正等待审核。晕啊!要等到猴年马月能通过审核啊……难怪这么少人发表评论

  5. @alvin:
    1.下载地址:http://www.51ajax.com/demo/sorttable/sorttable.js

    2.背景色可自定义

    3.最近比较忙,回复的晚了,见谅:)

  6. Hi hope:

    有个问题请教下,我在使用这个js中,遇到点问题:

    在下面这句:

    hasInputs = (typeof node.getElementsByTagName == ‘function’) &&
    node.getElementsByTagName(‘input’).length;

    报了一个” ‘undefined’ is null or not an object error.

    我将node.getElementsByTagName 打了出来,报错说
    getElementsByTagName is null or not an object.

    我用的IE6.0,struts2.1.6, table是从数据库中取出,body部分用控制的。

    谢谢,望回复。

  7. 对于表头是由两行合并生成,好像不支持啊。有解决的办法吗?

  8. 如果是两行合并的表头,浮动的时候,表头第一行就消失了。请问是什么原因呢?
    望解决,谢谢!

    序号
    基本信息

    姓名
    姓名
    籍贯

  9. 您好 楼主 我看了您的 sorttable 我想问下 关于多层表头 支持的如何那?

  10. 这个控件只能让table有浮动,没有反方向的操作嘛,我在浮动之后,有个方法可以去除,浮动的相关设置?

  11. 我想问下,这个只能用于10列的表格,我想多几列使用,怎么操作呢?

贾柬进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注