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

赞 (0)

相关推荐

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • 解决layui表格的表头不滚动的问题

    步奏: 1.设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table: 2.第二个table需要一个div包住,并设置宽高,可用绝对布局 3.tr下的th和td需要设置相同的宽度 实例: html: <html> <head></head> <body> <div id="righttable" style="width:100%;height:70%;padding-bo

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • 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 class=

  • 实例讲解iOS中的UIPageViewController翻页视图控制器

    实例讲解iOS中的UIPageViewController翻页视图控制器

    一.引言 UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图. UIPageViewController在iOS 5 SDK中首次引入,它使得开发者可以使用这个ViewController创建分页视图.在iOS 6中,这个类有了更新,支持滚动过渡效果.使用Page View,用户可以方便的通过手势在多个页面之间导航.UIPageViewContro

  • javascript 翻页测试页(动态创建标签并自动翻页)

    翻页测试页 $(id).scrollHeight - $(id).offsetHeight) { moveto = $(id).scrollHeight - $(id).offsetHeight; } if(Math.abs($(id).scrollTop - moveto) $(id).scrollHeight - $(id).offsetHeight) { moveto = $(id).scrollHeight - $(id).offsetHeight; } scrollTo(id,move

  • bootstrap table实现点击翻页功能 可记录上下页选中的行

    bootstrap-table中实现,翻页之后再返回,依然选中的情况,具体内容如下 //var productids = $("body",window.parent.frames[0].document).find('.ptids');//textarea存放数据 var productids = $('textarea'); var merge_order_object= {};//页码+id组成的对象 var jsonObj = {}; var current_page = &q

  • php中文本数据翻页（留言本翻页）

    在mysq中介绍翻页的文章不少,而文本数据表格式的翻页介绍的很少,这里我就简单的说一下翻页 主要介绍以下翻页思想1.留言本的翻页2.文本论坛的翻页 ------------------------留言本的翻页:------------------------------这个在文本数据表中的翻页是最简单的翻页,这样说明一下 golbal file    Data.dat    ---    NOTE FILE USE    user.dat    ---     Forum File useDat

  • 使用Fullpage插件快速开发整屏翻页的页面

    我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的. 今天我给大家介绍Fullpage插件,也能达到这一个效果. 下面我给同学们看下小米网站的这个页面:http://www.mi.com/hongmi2a/ 看过页面之后就直接进入我们今天的主题吧! 1.一些必要的资源 //jquery <script type="text/javascript" src="https://cdnjs.cloudflare.com/aja

  • Android自定义左右或上下滑动翻页效果

    本文实例为大家分享了Android自定义左右或上下滑动翻页展示的具体代码,供大家参考,具体内容如下 该自定义的效果和ViewPage+Fragment差不多 上下滑动翻页,继承ScrollView public class SlideScrollView extends ScrollView implements PageSlide{ private TotalSlide totalSlide; public SlideScrollView(AppCompatActivity context)

  • vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla

  • 小程序瀑布流组件实现翻页与图片懒加载

    电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框架抽象成组件,瀑布流的内容由业务确定.这样即可实现组件化和自定义的最大平衡,微信小程序组件源码. 首先,我们来看一下瀑布流组件在实际项目中的实际效果. 1 实际效果 瀑布流组件实际效果如下图所示,左侧为用户交互效果,右侧为图片懒加载实际效果. 2 什么是瀑布流? 瀑布流,又称瀑布流式布局.是比较流行

随机推荐