layui 实现table翻页滚动条位置保持不变的例子


Posted in Javascript onSeptember 05, 2019

最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过class定位表格div位置。

layui 实现table翻页滚动条位置保持不变的例子

可以看到 滚动条所在div class="layui-table-body layui-table-main"

我在layui table定义了一个父div,防止多个table时定位错误,先定位父div,再寻找内部的datatable

<div class="table-responsive" id="table_and_page_div_id" >
       <!--此处放一个用户表格-->
       <table id="user_list_table_id" lay-filter="tabl_lay_filter"></table>
       <div class="btn-group" style="margin-left: auto;margin-right: auto;" id="limt_butt_id">
       </div>
 
      </div>

原理就是先获取父div对象,然后再父div对象中找到 class=layui-table-main的对象,然后就可以操作滑动条了。

//获取表格重载之前scrollTop位置
       var dev_obj;   //layui table 父div
       var layuitable = null; //当前的layui table
       var scrollTop = 0;  //记录位置
 
       dev_obj = document.getElementById('table_and_page_div_id'); //table的父div
       if (dev_obj != null)
       {
        layuitable = dev_obj.getElementsByClassName("layui-table-main");
       }
       if (layuitable != null && layuitable.length > 0)
       {
        scrollTop = layuitable[0].scrollTop; //layuitable获取到的是 class=layui-table-main的集合
       }
 
       //刷新当前页
       g_table_config.data = g_UserInfoDataPage;
       g_tableIns.reload(g_table_config);//表格重载
 
       layer.close(g_layer_msg_index);  //关闭提示框
 
       //还原scroll位置
       if (layuitable != null && layuitable.length > 0)
       {
        layuitable[0].scrollTop = scrollTop;
       }

以上这篇layui 实现table翻页滚动条位置保持不变的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
vue环境搭建简单教程
Nov 07 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 #Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 #Javascript
You might like
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php截取字符串函数分享
2015/02/02 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
sails框架的学习指南
2014/12/22 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python中类的一些方法分析
2014/09/25 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
基于python实现复制文件并重命名
2020/09/16 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
办公室经理岗位职责
2014/01/01 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
化验员岗位职责
2015/02/14 职场文书
军训新闻稿范文
2015/07/17 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书