添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
忧郁的大象  ·  报错解决:DataLossError: ...·  7 小时前    · 
暗恋学妹的饼干  ·  GitHub - ...·  9 小时前    · 
没读研的猴子  ·  @para-ui/core - npm·  9 小时前    · 
痴情的雪糕  ·  Meteor 1.6.x + Ant ...·  9 小时前    · 
神勇威武的日记本  ·  Results - OpenURL ...·  4 周前    · 
跑龙套的大白菜  ·  专有云存储ABC ...·  4 月前    · 
正直的香瓜  ·  webSocket ...·  1 年前    · 

在以往实现表格数据排序分页功能,往往要求助于复杂的动态语言。下面为大家提供一个通过Javascript实现table表格排序分页功能的解决方案。

首先看一下最终效果: 在线示例

如果你对它的效果还算满意的话,请继续看它有哪些功能特点及如何使用,你会发现是如此简单。

功能特色:

  1. 实现表格的列排序功能(点击表头,切换该列升降序),也可以指定哪一列不排序;
  2. 实现当前排序列高亮显示;
  3. 实现表格奇偶行不同颜色,即换行变色;
  4. 实现表格分页功能,可指定是否开启分页功能及每页行数;
  5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接
  6. 表格外观样式可通过CSS灵活定制
  7. 所需要引用的js文件非常小巧,压缩版仅2.5k
  8. 使用非常简单,可进行参数配置
  9. 使用方法:

    1. 引用本功能需要的js文件;
    2. 初始化排序对象并设置参数,具体如下:
      var sorter = new TINY.table.sorter(”sorter”); //定义排序对象,注意前面的变量名称和后面的参数保持一致
      sorter.head = “head”; //指定表头的class
      sorter.asc = “asc”; //指定升序列的class
      sorter.desc = “desc”; //指定降序列的class
      sorter.even = “evenrow”; //指定奇数行的class
      sorter.odd = “oddrow”; //指定偶数列行class
      sorter.evensel = “evenselected”; //指定当前排序列奇数行的class
      sorter.oddsel = “oddselected”; //指定当前排序列偶数行的class
      sorter.paginate = true; //指定表格数据是否排序
      sorter.currentid = “currentpage”; //获取当前页码的dom对象id
      sorter.limitid = “pagelimit”; //获取总页数dom对象id
      sorter.init(”table”,1); //初始化表格,第一个参数是要初始化表格table的id,第二个参数是默认的排序列索引,0为第一列
    3. 如果哪一些不需要排序,可以再表头th节点的class赋值为nosort
    4. 通过上面参数配置时指定的class,定义表格css样式
    5. 其它说明:

      1. 该功能在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过。
      2. 排序数据不支持中文数据,这是一个缺陷
      3. 本功能 来源
      4. 示例源码下载: 通过javasrcript实现table表格排序分页功能 [下载次数:1525]