BootStrap 表格分頁(伺服器客戶端)
阿新 • • 發佈:2018-12-10
伺服器分頁表格
function InitMainTable1 () { //記錄頁面bootstrap-table全域性變數$table,方便應用 var queryUrl = "/XServer/user.do?_method=doSearch"; $table = $('#table').bootstrapTable({ url: queryUrl, //請求後臺的URL(*) method: 'POST', //請求方式(*) striped: true, //是否顯示行間隔色 cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) pagination: true, //是否顯示分頁(*) sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber: 1, //初始化載入第一頁,預設第一頁,並記錄 pageSize: 8, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) search: false, //是否顯示錶格搜尋 strictSearch: true, showColumns: false, //是否顯示所有的列(選擇顯示的列) showRefresh: true, //是否顯示重新整理按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點選選中行 //height: 500, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度 uniqueId: "ID", //每一行的唯一標識,一般為主鍵列 showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕 cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 //得到查詢的引數 queryParams : function (params) { //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的 var temp = { rows: params.limit, //頁面大小 page: (params.offset / params.limit) + 1, //頁碼 sort: params.sort, //排序列名 sortOrder: params.order //排位命令(desc,asc) }; return temp; }, columns: [{ checkbox: true, visible: true //是否顯示覆選框 }, { field: 'id', title: 'ID', sortable: true },{ field: 'name', title: '姓名', sortable: true }, { field: 'departmentStr', title: '部門', sortable: true }, { field: 'office', title: '職位', sortable: true, },], onLoadSuccess: function () { }, onLoadError: function () { showTips("資料載入失敗!"); }, onDblClickRow: function (row, $element) { var id = row.ID; EditViewById(id, 'view'); }, }); };
function queryParams(params)
{
var paras = {};
var queryPara = JSON.stringify(paras);
params._json = queryPara;
return params;
}
表格重新載入
$("#tb2").bootstrapTable('destroy');
客戶端表格分頁:
function getTb2(jsonUser){ $("#tb2").bootstrapTable('destroy'); $('#tb2').bootstrapTable({ striped: true, //是否顯示行間隔色 cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) pagination: true, //是否顯示分頁(*) sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber: 1, //初始化載入第一頁,預設第一頁,並記錄 pageSize: 8, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) search: false, //是否顯示錶格搜尋 strictSearch: true, showColumns: false, //是否顯示所有的列(選擇顯示的列) showRefresh: true, //是否顯示重新整理按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點選選中行 //height: 500, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度 uniqueId: "ID", //每一行的唯一標識,一般為主鍵列 showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕 cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 columns: [ {field:"checked",checkbox:true}, {field:"departmentStr",title:"部門",align:"center",valign:"middle",sortable:"true"}, {field:"officeStr",title:"職位",align:"center",valign:"middle",sortable:"true"}, {field:"name",title:"姓名",align:"center",valign:"middle",sortable:"true"}, ], data:jsonUser, }); }
jsonUser 是在客戶端的j'son 我的表格就是為了顯示json的內容 columns中的第一個引數和json的引數一樣才能顯示