1. 程式人生 > >bootstrapTable查詢時分頁頁數不初始化問題

bootstrapTable查詢時分頁頁數不初始化問題

在用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');	//重新整理表格
}