這段時間在做項目的時候用到了bootstrap-table的表格組件,使用的過程中遇到了一個問題,無法從后台獲取數據,只能通過 ajax獲取數據后再利用bootstrapTable的load方法手動添加。原因是后台返回的數據格式是一個json嵌套,和要求的格式不符,需要先通過 responseHandler 對數據進行處理,分頁設置為server 會對其有影響,無法加載數據

function queryParams() {
var ConditionParam = $('.search_box').DABindingGetForm();
var json = {
SearchInfo: {
PageIndex: PageNumber,
PageSize: PageSize,
Sort: null,
ItemsCount: 0,
ConditionParam: ConditionParam
}
}
return { con: JSON.stringify(json) }
}
function tableTest(col) {
$('#test').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",
datatype: 'json',
//toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortable: true, //是否啟用排序
sortOrder: "ID asc", //排序方式
pageNumber: 1, //初始化加載第一頁,默認第一頁
pageSize: 12, //每頁的記錄行數(*)
pageList: [20, 50, 100, 150], //可供選擇的每頁的行數(*)
url: "/CharterInnerProduct/CharterInnerProductBillListData",//這個接口需要處理bootstrap table傳遞的固定參數
queryParamsType: '', //默認值為 'limit' ,在默認情況下 傳給服務端的參數為:offset,limit,sort
// 設置為 '' 在這種情況下傳給服務器的參數為:pageSize,pageNumber
queryParams: queryParams,//前端調用服務時,會默認傳遞上邊提到的參數,如果需要添加自定義參數,可以自定義一個函數返回請求參數
sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*)
//search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以,個人感覺意義不大
strictSearch: true,
//showColumns: true, //是否顯示所有的列
//showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
searchOnEnterKey: true,
search: true,
responseHandler: function (res) {
console.log(res)
return eval(res.Item.ProductList)
},
columns: col,
pagination: true
});
}
