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

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

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

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

原理就是先获取父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翻页滚动条位置保持不变的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-09-05

layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子相关推荐

php天猫列表数据抓取,如何翻页抓取网页数据——以采集天猫搜索列表为例
我们在抓取数据时,通常不会只抓取网页当前页面的数据,往往都会继续抓取翻页后的数据.本文就为大家介绍,集搜客GooSeeker网络爬虫如何在进行数据抓取时,自动抓取翻页后的数据. 在MS谋数台的爬虫路线 ...
前嗅教你大数据：采集带有翻页结构的网页数据
置顶 "前嗅大数据" 和数据大牛一起成长,做牛气哄哄的大数据人 [场景描述]采集带有翻页的网页中的数据. [使用工具]前嗅ForeSpider数据采集系统,免费下载: ForeSp ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
数据轮播图翻页封装（左右点击）
效果图: <template><div class="box" style="height:200px;"><!-- 左 --&g ...
python selenium翻页_Selenium翻页的实现方法实例
在实际测试项目中,会出现新增数据记录不显示在第一页,而是显示最后一页,对于这种情况,那我们要根据每页显示数据数来进行翻页,保证代码能够准确拿到数据文本来做结果比对. 第一步:在基础类BaseTest中 ...
Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放
1. 实现效果效果图中,视频没有铺满是因为使用了ExoPlayer的RESIZE_MODE_FIT模式, 虽然使用RESIZE_MODE_FILL模式可以填充整个父布局,但是本Demo中使用的视频 ...
2-八爪鱼的自动识别（Cookie设置、翻页与循环）
目录 2-1-知识储备 Cookie 2-2-微博数据抓取(登陆Cookie设置) 1-在八爪鱼页面打开微博的官网 2-切换至"浏览模式" 3-登录微博 4-设置Cookie 5- ...
MYSQL数据库的翻页
这个是我自己想出来的,当时只想到这么个笨方法. 看到不少人都在问MYSQL怎么翻页,现在拿出来给大家借鉴一下. 如果有好的方法请留言.大家互相探讨. <script language=" ...
上一页，下一页的翻页制作`
前言提示:上一页,下一页的翻页制作一.逻辑 1.获取数据,存到arrList 2.封装函数getDataList(),把数据存到arrList中 3.编写函数,上一页,下一页: 二.代码代码如下 ...

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

layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子相关推荐

最新文章

热门文章