layui使用table.reload()后保持滚动条

使用table时有个特殊需要,改变table中的某一项时,再table展示内容较多需要滚动条时,由于后台需要运算结果,所以必须要table.reload加载数据,但是滚动条会被重置到0的位置。

网上有推荐的方法,实测后发现缺少一句代码,导致无法改动滚动条位置。

 1 var $ = layui.$,
 2       table = layui.table;
 3
 4 //在你需要重置表格的前面加上代码
 5
 6 var scrollTop=0;
 7 var layuiTable = $(‘.layui-table-main‘);
 8 if(layuiTable!=null&&layuiTable.length>0){
 9      scrollTop = layuiTable[0].scrollTop;
10 }
11
12 table.reload(‘这里是需要加载的table‘);
13
14 //这里必须使用setTimeout
15 setTimeout(function(){
16       if(layuiTable!=null&&layuiTable.length>0){
17          $(‘.layui-table-main‘).scrollTop(scrollTop)
18       }
19 },100)
20    

原文地址:https://www.cnblogs.com/shazixu/p/11775753.html

时间: 2024-08-30 16:07:00

layui使用table.reload()后保持滚动条的相关文章

layui的table在reload之后工具栏按钮失效的问题解决方案

layui的table在使用了toolbar工具栏后,刷新表格,工具栏的按钮会失效,原因是表格重新加载后,没有绑定工具栏按钮的触发事件,因此只需要在表格初始化完毕之后和刷新表格完毕后重新绑定一下所有按钮的绑定事件就可以了,这里把事件处理集合到了一个方法中,请参照bindTableToolbarFunction,具体代码如下: 1. Html页面 <section class="layui-fluid"> <aside class="layui-card&qu

layui的table使用

不多bb,直接上代码 html的代码: <link rel="stylesheet" href="../../static/layui/css/layui.css"> <script src="../../static/layui/layui.js"></script> <script src="../../static/js/jquery.js"></script>

layui教程---table

layui.config({ base: "${ctx}/static/js/" }).use(['form', 'layer', 'jquery', 'common','element', 'table', 'laytpl'], function () { $ = layui.$; var $ = layui.$, form = layui.form, common = layui.common, laydate = layui.laydate, element = layui.el

一种table超出高度进出滚动条的解决方案

在日常的开发过程中,我们可能会遇到这样一种需求,在指定高度内显示table,超过高度时表格出滚动条. 让我们带着这个问题,一起来探讨吧! 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 <link href="../css/boo

layui 框架 table插件 实现键盘快捷键 切换单元格编辑

最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 1.支持 enter,上,下,右键 切换单元格,支持隐藏列跳过切换. 注:单元格必须开启了 edit:text 模式,才支持键盘切换. 使用方法:1.在需要启用此功能的页面中js代码段插入.2.在公用的js文件中插入即可.使用此方式js文件必须在页面加载完成后再加载,最迟加载,切记! 原文地址:https://www.cnblogs.com/zakary-zhen/p/1

授予 SELECT ANY TABLE 权限后无法访问sys 用户的表

SQL> show parameter dict NAME                                 TYPE        VALUE ------------------------------------ ----------- ------------------------- O7_DICTIONARY_ACCESSIBILITY          boolean     FALSE ---------缺省为false ----设置为true后普通用户拥有 sel

table 设置表格有滚动条。

<!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>设置表格有滚动条</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 table

bootstrap table 分页后,重新搜索的问题

前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果.  也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").bo

layui中table表格的操作列(删除,编辑)等按钮的操作

1 //编辑,删除,发布申请 2 table.on('tool(demo)', function(obj){ 3 var data = obj.data; 4 // console.log(data) 5 if(obj.event === 'check'){ 6 // console.log(data.id); 7 $('.textCon').val(""); 8 layer.open({ 9 title: '发布申请' 10 ,type: 1 11 ,maxmin:true 12 ,