bootstrapTable初始化常用參數,前端分頁排序,后端獲取表格數據
$('#table').bootstrapTable({
toolbar: '#mybar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
uniqueId: "ID", //每一行的唯一標識,一般為主鍵列
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: columnsdata,
pagination: true,
pageList: [10, 20, 30, 40, 'all'],
loading: '數據加載中...',
pageSize: 10,
pageNumber: 1,
showExport: true,
exportDataType: 'all', //basic', 'all', 'selected'.
exportTypes: ['excel'], //導出類型
exportOptions: {
ignoreColumn: [0, 0], //忽略某一列的索引
fileName: $('#myModal .modal-header h4').text(), //文件名稱設置
worksheetName: 'Sheet1', //表格工作區名稱
tableName: $('#myModal .modal-header h4').text(),
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
},
method: 'get',
datatype: 'json',
url: "/user/query",//這個接口需要處理bootstrap table傳遞的固定參數
queryParamsType: '', //默認值為 'limit' ,在默認情況下 傳給服務端的參數為:offset,limit,sort
queryParams: function () {
let params = {keyword: $("#search_keys").val().replace(/[ ]/g, "").replace(/\t/g, "")}
return params
},//前端調用服務時,會默認傳遞上邊提到的參數,如果需要添加自定義參數,可以自定義一個函數返回請求參數
responseHandler: function (res) {
return res.data
},
});
