Bootstrap table兩種分頁示例
阿新 • • 發佈:2019-01-23
伺服器端分頁
注意伺服器端資料的返回的格式
[json]必須包含:total節點(總記錄數),rows節點(分頁後資料)
即:{“total”:24,”rows”:[…]}
$('#test-table').bootstrapTable({
//請求方法
method: 'get',
//是否顯示行間隔色
striped: true,
//是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
cache: false,
//是否顯示分頁(*)
pagination: true,
//是否啟用排序
sortable: false,
//排序方式
sortOrder: "asc",
//初始化載入第一頁,預設第一頁
//我設定了這一項,但是貌似沒起作用,而且我這預設是0,- -
//pageNumber:1,
//每頁的記錄行數(*)
pageSize: 10,
//可供選擇的每頁的行數(*)
pageList: [10, 25, 50, 100],
//這個介面需要處理bootstrap table傳遞的固定引數,並返回特定格式的json資料
url: "/test/testtable.action",
//預設值為 'limit',傳給服務端的引數為:limit, offset, search, sort, order Else
//queryParamsType:'',
////查詢引數,每次呼叫是會帶上這個引數,可自定義
queryParams: queryParams : function(params) {
var subcompany = $('#subcompany option:selected').val();
var name = $('#name').val();
return {
pageNumber: params.offset+1,
pageSize: params.limit,
companyId:subcompany,
name:name
};
},
//分頁方式:client客戶端分頁,server服務端分頁(*)
sidePagination: "server",
//是否顯示搜尋
search: false,
//Enable the strict search.
strictSearch: true,
//Indicate which field is an identity field.
idField : "id",
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '測試標識',
align: 'center'
}, {
field: 'testname',
title: '測試名字',
align: 'center'
},{
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通過formatter可以自定義列顯示的內容
//value:當前field的值,即id
//row:當前行的資料
var a = '<a href="" >測試</a>';
}
}],
pagination:true
});
客戶端分頁
將sidePagination屬性設為 “client”即可
伺服器返回json資料必須包含data節點(展示資料)
當資料量較少,只有上千條資料時,一次性將所有資料返回給客戶端,無論點下一頁,或搜尋條件時,不向服務端發請求,實現全文檢索。