layui 實(shí)現(xiàn)table翻頁滾動(dòng)條位置保持不變的例子

發(fā)布時(shí)間：2020-10-03 18:44:52 來源：腳本之家閱讀：444 作者：cp1300 欄目：web開發(fā)

最近使用了layui table但是發(fā)現(xiàn)了一系列問題，由于被封裝過不好自己修改，比如翻頁后滑動(dòng)條每次都會(huì)復(fù)位，導(dǎo)致體驗(yàn)不好，通過調(diào)試，我發(fā)現(xiàn)layui table并沒有給div加id標(biāo)簽，我通過class定位表格div位置。

可以看到滾動(dòng)條所在div class="layui-table-body layui-table-main"

我在layui table定義了一個(gè)父div,防止多個(gè)table時(shí)定位錯(cuò)誤，先定位父div，再尋找內(nèi)部的datatable

 <div class="table-responsive" id="table_and_page_div_id" >
       <!--此處放一個(gè)用戶表格-->
       <table id="user_list_table_id" lay-filter="tabl_lay_filter"></table>
       <div class="btn-group"  id="limt_butt_id">
       </div>
 
      </div>

原理就是先獲取父div對(duì)象，然后再父div對(duì)象中找到 class=layui-table-main的對(duì)象，然后就可以操作滑動(dòng)條了。

//獲取表格重載之前scrollTop位置
       var dev_obj;   //layui table 父div
       var layuitable = null; //當(dāng)前的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的集合
       }
 
       //刷新當(dāng)前頁
       g_table_config.data = g_UserInfoDataPage;
       g_tableIns.reload(g_table_config);//表格重載
 
       layer.close(g_layer_msg_index);  //關(guān)閉提示框
 
       //還原scroll位置
       if (layuitable != null && layuitable.length > 0)
       {
        layuitable[0].scrollTop = scrollTop;
       }

以上這篇layui 實(shí)現(xiàn)table翻頁滾動(dòng)條位置保持不變的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

layui 實(shí)現(xiàn)table翻頁滾動(dòng)條位置保持不變的例子

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽