zoukankan      html  css  js  c++  java
  • 用Javascript进行简单的Table点击排序[转]

    转自:http://www.cnblogs.com/robot/archive/2008/04/20/1161801.html
    新发现一个bug:10比2小,原因是sort默认是按ascii排序的,已修复该问题.
    最新DEMO下载 [修复了一些已知的问题,结合网友的回复优化了一些代码,用法跟原来要样]
    html代码[可以不看,跟html没什么关系.]:

    javascript代码:
    代码:new TableSorter("tb1");
    效果:点击任意表头可执行排序.
    序号 姓名 工号 职位 性别 业绩 报到时间
    1 刘德华 8008 总裁 98 2008-04-12
    2 吴奇隆 8004 主管 80 2008-04-16
    3 王光良 8003 经理 85 2008-04-15
    4 张学友 8009 副总裁 90 2008-04-11
    5 张柏芝 8005 助理 78 2008-04-13
    6 陈冠希 8001 总监 60 2008-04-18
    7 陈慧琳 8002 试用期 85 2008-04-18
    8 张曼玉 8007 高级经理 82 2008-04-16
    9 周润发 8006 副总裁 88 2008-04-13

    代码:new TableSorter("tb2", 0, 2, 5, 6);
    效果:点击表头0,2,5,6列可执行排序.
    序号 姓名 工号 职位 性别 业绩 报到时间
    1 刘德华 8008 总裁 98 2008-04-12
    2 吴奇隆 8004 主管 80 2008-04-16
    3 王光良 8003 经理 85 2008-04-15
    4 张学友 8009 副总裁 90 2008-04-11
    5 张柏芝 8005 助理 78 2008-04-13
    6 陈冠希 8001 总监 60 2008-04-18
    7 陈慧琳 8002 试用期 85 2008-04-18
    8 张曼玉 8007 高级经理 82 2008-04-16
    9 周润发 8006 副总裁 88 2008-04-13


    代码:new TableSorter("tb3").OnSorted = function(c, t)
    {
    alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
    }
    效果:点击任意表头可执行排序并返回提示.
    序号 姓名 工号 职位 性别 业绩 报到时间
    1 刘德华 8008 总裁 98 2008-04-12
    2 吴奇隆 8004 主管 80 2008-04-16
    3 王光良 8003 经理 85 2008-04-15
    4 张学友 8009 副总裁 90 2008-04-11
    5 张柏芝 8005 助理 78 2008-04-13
    6 陈冠希 8001 总监 60 2008-04-18
    7 陈慧琳 8002 试用期 85 2008-04-18
    8 张曼玉 8007 高级经理 82 2008-04-16
    9 周润发 8006 副总裁 88 2008-04-13

  • 相关阅读:
    hdu1593(find a way to escape)
    每日学习小记 11/02
    将博客搬至CSDN
    浏览器渲染机制
    适配器模式 The Adapter Pattern
    工厂方法模式 The Factory Method Pattern
    观察者模式 The Observer Pattern
    模板方法模式 The Template Method Pattern
    命令模式 The Command Pattern
    迭代器模式 The Iterator Pattern
  • 原文地址:https://www.cnblogs.com/ly5201314/p/1565299.html
Copyright © 2011-2022 走看看