使用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