bootstrapTable查詢時分頁頁數不初始化問題
阿新 • • 發佈:2019-01-26
在用bootstrapTable時遇到一個問題:如果在列表中點選下一頁到第二頁資料,然後再查詢時,資料預設會顯示第二頁資料,如果資料達不到兩頁,頁面就會顯示空白。
解決:將表格載入寫為一個方法,在查詢時,不呼叫表格的重新整理方法,而是銷燬表格,然後再次呼叫表格的載入方法。
程式碼如下:
$(function(){ oTableInit(); }) function oTableInit(){ $table.bootstrapTable({ url: "${base}/role/getRoleList", dataType: "json", singleSelect: false, striped: true, //是否顯示行間隔色 cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) sortable: true, //是否啟用排序 pagination: true, //顯示分頁按鈕 sortName:"create_time", sortOrder:"desc", //預設排序 pageNumber: 1, //初始化載入第一頁,預設第一頁 pageSize: 10, //預設顯示的每頁個數 pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) queryParamsType: '', //預設值為 'limit' ,在預設情況下 傳給服務端的引數為:offset,limit,sort // 設定為 '' 在這種情況下傳給伺服器的引數為:pageSize,pageNumber queryParams:function(params){ var temp = { pageSize: params.pageSize, //頁面大小 pageNumber: params.pageNumber, //頁碼 sortName: params.sortName, //排序列 sortOrder: params.sortOrder, //排序方式 queryJson: JSON.stringify(getQuetyData()), //查詢資料 } return temp; }, //search: true, 顯示搜尋框(客戶端搜尋) sidePagination: "server", //服務端處理分頁 //showToggle:true, //是否顯示詳細檢視和列表檢視的切換按鈕 //cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 columns: [{ //field: 'Number',//可不加 title: '序號',//標題 可不加 align : 'center', valign : 'middle', formatter: function (value, row, index) { return index+1; } }, { title : '角色名稱', field : 'role_name', align : 'center', valign : 'middle', },{ title : '建立時間', field : 'create_time', align : 'center', valign : 'middle' },{ title : '修改時間', field : 'modify_time', align : 'center', valign : 'middle' },{ title : '操作', field : 'role_id', align : 'center', formatter : function(value,row,index){ var xgqx = '<a href="javascript:void()" onclick="editModel(\''+ row.role_id + '\')">修改許可權</a> '; var e = '<a href="javascript:void()" onclick="editRole(\''+ row.role_id + '\')">編輯</a> '; var d = '<a href="javascript:void()" onclick="deleteRole(\''+ row.role_id +'\')">刪除</a> '; return xgqx+e+d; } }], onLoadSuccess: function(){ //載入成功時執行 //alert("載入成功"); }, onLoadError: function(){ //載入失敗時執行 alert("載入資料失敗"); } }); }
然後是查詢時的呼叫:
/*查詢*/
function search(){
//解決表格查詢時分頁不初始化問題
$table.bootstrapTable('destroy'); //銷燬表格
oTableInit();//重新載入表格
//$table.bootstrapTable('refresh'); //重新整理表格
}