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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
vue中锚点的三种方法
Jul 06 Javascript
JS原型与继承操作示例
May 09 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
js不常见操作运算符总结
Nov 20 Javascript
JavaScript实现音乐播放器
Aug 14 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP多线程类及用法实例
2014/12/03 PHP
学习PHP session的传递方式
2016/06/15 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jQuery.each使用详解
2015/07/07 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
node 版本切换的实现
2020/02/02 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
妇联主席先进事迹
2014/05/18 职场文书
焦点访谈观后感
2015/06/11 职场文书
淮海战役观后感
2015/06/11 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技