BootstrapTable 和layui獲取當前頁、數據刷新後留在當前頁

原文鏈接:https://blog.csdn.net/COCOLI_BK/article/details/88417605

使用BootstrapTable組件進行開發,開發過程中會經常遇到這樣的需求:

     table分頁後,對某頁中的某條數據進行處理後(編輯,更新等等之後),刷新表格,爲了保證table的實時正確性,先進行table的destroy,然後獲取新建table並獲取數據,需要定位到操作當前記錄的對應頁碼,默認使用window.reload時候會跳到最開始的第一頁,pageNumber會重置爲1,也就是會跳回至首頁。

這裏有兩種辦法:

 1, refresh:刷新表格數據,可以加入參數url指定請求發向的url(可以是一個新的),silent:true時靜默更新,query:{} 可以指出一些新的ajax請求時的參數。

$('#bootStrapTableId').bootStrapTable('refresh');

2,獲取當前table顯示的頁碼,也就是當前table分頁所顯示的第幾頁,通過對錶格數據處理後的回調函數中加入table的當夜頁碼,從而讓table在destroy之後,以給定的顯示頁碼進行渲染數據:

$('#bootStrapTableId').bootStrapTable('getOptions').pageNumber;
 

注:getOptions:獲取表格的一些基本屬性,返回一個object,key有像conlumns,data,sortOrder,class這些很多屬性,不清楚有哪些屬性的,可以控制檯console一下看看    

上述總結的參考出處:https://blog.csdn.net/qq_31302091/article/details/80894940

 

layui - 重載和刷新表格時保持在當前頁碼 - 獲取當前數據所在的頁碼 和 顯示條數

$(".layui-laypage-em").next().html(); //當前頁碼值

$(".layui-laypage-limits").find("option:selected").val() //分頁數目

一.表格重載時

layui.use(['element', 'table', 'util'], function () {
        var table = layui.table,
            $ = layui.jquery,
            element = layui.element,
            util = layui.util;
        // 表格搜索
        // 回車提交搜索條件
        document.onkeydown = function (e) {
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which;
            if (code == 13 || code == 108) {
                $("button[data-type='reload']").click(); // #chk_match 是你 提交按鈕的ID
            }
        }
 
        /* 接口數據 :搜索/添加*/
        var active = {
            /* 重載 */
            reload: function () {
                var customerName = $('#customerName')
                //執行重載 爲表格屬性中的id,不是標籤中的id
                table.reload('lookDetail', {   //方法渲染表格裏的屬性 ID
                    page: {
                      curr: $(".layui-laypage-em").next().html()  //主要代碼行
                    },
                    where: {
                        customerName: customerName.val() ? customerName.val() : ''
                    }
                });
            },
            reset : function(){
                /*重置搜索條件*/
                $('#customerName').val('');
            }
        };
        $('.layui-input-inline .layui-btn-normal').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
 })

二.刪除時的代碼,當前頁刷新表格的寫法

function del(url, userId,tableId) {
        $.ajax({
          url: url + userId,
          type: "delete",
          contentType: "application/json", //設置請求參數類型爲json字符串
          dataType: "json",
          success: function (res) {
            if (res.status == 200) {
              layer.msg("刪除成功", {
                icon: 6
              });
              layui.table.reload(tableId,{page:{curr:$(".layui-laypage-em").next().html()}})   //這行時在當前頁刷新表格的寫法
            } else {
              layer.msg("刪除失敗", {
                icon: 5
              });
            }
          }
        });
      }
三.在子頁面刷新父頁面,保持在當前頁

var obj = {};
      form.on('submit(component-form-element)', function (data) {
        obj.dataFilesList = fileList.dataFilesList
        obj.sysUserCertificate = data.field
        // var obj = {
        //   "sysUserCertificate": {
        //     data
        //   },
        //   dataFilesList
        // };
        $.ajax({
          url: "/personnel/certificate",
          type: "post",
          contentType: "application/json", //設置請求參數類型爲json字符串
          dataType: "json",
          data: JSON.stringify(obj),
          success: function (res) {
            var index = parent.layer.getFrameIndex(window.name); /* 先得到當前iframe層的索引 */
            if (res.status == 200) {
              parent.layui.table.reload('licenceReload',{page:{curr:$(".layui-laypage-em").next().html()}});   //主要代碼
              parent.layer.close(index); //再執行關閉
              parent.layer.msg("添加成功", {
                icon: 6
              });
            } else {
              parent.layer.msg(res.msg, {
                icon: 5
              });
            }
          }
        })
        return false;
      });

上述參考博文出處:https://blog.csdn.net/COCOLI_BK/article/details/88417605

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章