1. 程式人生 > >Bootstrap table兩種分頁示例

Bootstrap table兩種分頁示例

伺服器端分頁

注意伺服器端資料的返回的格式

[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節點(展示資料)

當資料量較少,只有上千條資料時,一次性將所有資料返回給客戶端,無論點下一頁,或搜尋條件時,不向服務端發請求,實現全文檢索。