前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的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)的更多相关文章

  1. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  2. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  3. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  4. bootstrap 冻结表格,冻结表头

    需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...

  5. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  6. 12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  7. ajax json 表格排序,分页,自己定义每页数量

    ajax json 表格排序.分页,自己定义每页数量  点击表头能够排序.依照升序或者降序,另外支持多列排序 设置每页数量 演示   XML/HTML Code <table id='examp ...

  8. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  9. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

随机推荐

  1. ajax 406 Not Acceptable

    搞了半天, 后面参照 http://www.th7.cn/web/ajax/201611/194702.shtml, 终于把问题解决了.. 使用ajax向后台请求时,前台报错406 Not Accep ...

  2. Flex Iris效果放大或缩小组件演示

    Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画.该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标.演示: 源码如下: <?xml version=&q ...

  3. CRC16-CCITT C语言代码

    代码如下,使用空间换时间的方法 #define CRC16_CCITT_SEED 0xFFFF // 该位称为预置值,使用人工算法(长除法)时 需要将除数多项式先与该与职位 异或 ,才能得到最后的除数 ...

  4. 机器学习进阶-人脸关键点检测 1.dlib.get_frontal_face_detector(构建人脸框位置检测器) 2.dlib.shape_predictor(绘制人脸关键点检测器) 3.cv2.convexHull(获得凸包位置信息)

    1.dlib.get_frontal_face_detector()  # 获得人脸框位置的检测器, detector(gray, 1) gray表示灰度图, 2.dlib.shape_predict ...

  5. 爬虫--scrapy+redis分布式爬取58同城北京全站租房数据

    作业需求: 1.基于Spider或者CrawlSpider进行租房信息的爬取 2.本机搭建分布式环境对租房信息进行爬取 3.搭建多台机器的分布式环境,多台机器同时进行租房数据爬取 建议:用Pychar ...

  6. TWebBrowser禁止弹出Alert对话框

    以前介绍过通过编写Webbrowser1的OnDocumentComplete事件响应代码可以拦截网页弹出的Alert等对话框,代码如下: procedure TForm1.WebBrowser1Do ...

  7. linux shell 杂

    1. 字符串截取 var=http://www.baidu.com/index.html echo ${var} var=http://www.baidu.com/index.html /*从左到右第 ...

  8. greenlet

    在任何时刻,只有一个greenlet在运行,合理安排的串行. http://www.cnblogs.com/xybaby/p/6337944.html

  9. JSP基本

    JSPとは.HTMLファイルにJavaコードを埋め込んでおき.クライアントの要求に応じてコードを実行.処理結果のみをクライアントに送信する技術です. 1.JSPは実はサーブレットです.最初にリクエスト ...

  10. C#实现联合体

    [StructLayout(LayoutKind.Explicit, Size = )] public struct TypeTransform { [FieldOffset()] public fl ...