天天看點

div layui 滾動_layui 實作table翻頁滾動條位置保持不變的例子,

layui 實作table翻頁滾動條位置保持不變的例子,

最近使用了layui table但是發現了一系列問題,由于被封裝過不好自己修改,比如翻頁後滑動條每次都會複位,導緻體驗不好,通過調試,我發現layui table并沒有給div加id标簽,我通過class定位表格div位置。

div layui 滾動_layui 實作table翻頁滾動條位置保持不變的例子,

可以看到 滾動條所在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翻頁滾動條位置保持不變的例子就是小編分享給大家的全部内容了,希望能給大家一個參考,也希望大家多多支援3672js教程。

本站文章為3672js教程網友分享投稿,版權歸原作者,歡迎任何形式的轉載,但請務必注明出處。同時文章内容如有侵犯了您的權益,請聯系我們處理。