這段時間在做項目的時候用到了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 }); }