layui table翻页滚动条位置保持不变

2018年06月24日 07:30:53 cp1300 阅读数：1589

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

可以看到滚动条所在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 滚动键盘相关推荐

layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...
php layui table,layui table 相关问题汇总
1.表格内容自动换行完美解决默认情况下,layui table表格内容超出表格宽度会自动省略号隐藏需要鼠标放到单元格上,出现次图标然后再点击,才会显示全部,用起来不方便解决方法: 未页面添加c ...
layui table 字体大小_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
layui table 设置滚动条
table设置一下高度,就会自动出现滚动条: table.render({ elem: '#jqGrid' ,height: 420 <!DOCT ...
layui table 列覆盖
layui table 列个数超过10列后,表头发生覆盖现象. 临时解决方法:注释掉下面代码: ,'{{# if(left){ }}','<div class="layui-table ...
layui table单元格事件修改值
事件中的 this相当于document.getElementById("id") 替代方法就是将原本 document.getElementById("id" ...
layui table行点击tr_layui框架table表格实现单击行选中checkbox功能
layui.table.on('row(operateEvent)', function (obj) { var tableDiv; var index = $(obj.tr.selector).at ...
layui table 分页记住之前勾选的数据
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

layui table 滚动键盘

layui table翻页滚动条位置保持不变

layui table 滚动键盘相关推荐

最新文章

热门文章

layui table 滚动 键盘

layui table翻页滚动条位置保持不变

layui table 滚动 键盘相关推荐

最新文章

热门文章

layui table 滚动键盘

layui table 滚动键盘相关推荐