素材牛VIP会员

[原创] jQuery自定义操作表格插件

 所属分类:网页特效-表格

 浏览:1579次  评论:3次  更新时间:2019-02-18
牛币素材VIP可免积分下载
[原创] jQuery自定义操作表格插件兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:自定义表格,包括翻页效果,翻页选中,自定义每页数据条数,记录选中的数据。
 标签:表格

详细介绍

var  backupAataArray=[],//接受接口的数据,避免翻页的时候发送多次请求
dataTotalNum=0,//数据总条数
tableNum=5,//每一页展示的数据条数
filtrateTable=[],//table每次需要展示的数据,受每页展示条数的限制;
pageNum=1,//当前所在页码;
pageFixedNum=6,//初始化定的页码数量
dataSet=new Set();//用集合来存储选中的数据
var roleSelect=[]//角色下拉框数据;
var pagesChoose=[1,2,3,5,10,20];//自定义每页数据显示条数,可修改
var setOn=true;

初始化表格的函数 S

tableInit(jsonData,1,pagesChoose,false);

初始化表格的函数 E

* 渲染的table的id 重要,重要。渲染多个table的关键(这个留着我下次再封装吧,突然感觉还要考虑很多东西)

  * jsonData:数据(这里是使用的固定数据,因为ajax本地跨域的问题,所以没有使用ajax传递数据,项目中,需根据实际环境做出调整)

  * 每页展示的数据条数,默认为5 可填写的格式为,number true(为默认)

  * 可修改的每页展示条数,默认为[5,10,20];,填写格式为 array true(为默认)

  * 是否添加翻页选中效果 此处使用了set集合的形式,避免重合,所以请使用唯一标识来区别 true 默认打开,false 关闭

文件目录结构

  • ┝ index.html
  • js
    • ┝ jquery-1.12.3.js

相关素材 - 表格

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

mi***tu  
2019年02月19日

界面很酷。

回复
zj***ar  
2019年07月02日

移动端显示不友好

回复
qq***46  
2020年09月20日

很有教学意义~~!~!~

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)