原生JS制作数据表格点击表头分类排序带分页表格排序

 所属分类:表格

 浏览:925次-  下载:22次-  评论: 0次-  更新时间:2020-09-01

image.png

使用方法:

1、引入js文件

<script type="text/javascript" src="script.js"></script>

2、参数配置

<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table",1);
</script>


金币说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值金币充值会员更多说明»
描述:1. 实现表格的列排序功能(点击表头,切换该列升降序),也可以指定哪一列不排序;2. 实现当前排序列高亮显示;3. 实现表格奇偶行不同颜色,即换行变色;4. 实现表格分页功能,可指定是否开启分页功能及每页行数;5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接6. 表格外观样式可通过CSS灵活定制7. 所需要引用的js文件非常小巧,压缩版仅2.5k8. 使用非常简单,可进行参数配置
 标签: 排序分页表格

文件目录结构

  • ┝ script.js
  • ┝ www.zzsucai.com.txt
  • ┝ ┬δ░∩╓≈.url
  • ┝ index.html
  • ┝ style.css
  • images
      • ┝ last.gif
      • ┝ first.gif
      • ┝ header-selected-bg.gif
      • ┝ header-bg.gif
      • ┝ previous.gif
      • ┝ sort.gif
      • ┝ next.gif
      • ┝ bg.gif
      • ┝ asc.gif
      • ┝ desc.gif

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!
我的金币余额: 0 已下载次数: 22
所需金币:15开始下载

金币获取:签到、评论、投搞、充值、发帖、回帖    » 在线充值(10金币=1元)