Bootstrap table兩種分頁示例
Bootstrap table服務器端分頁和客戶端分頁,供大家參考,具體內(nèi)容如下
服務器端分頁
注意服務器端數(shù)據(jù)的返回的格式
[json]必須包含:total節(jié)點(總記錄數(shù)),rows節(jié)點(分頁后數(shù)據(jù))
即:{“total”:24,”rows”:[…]}
$('#test-table').bootstrapTable({ //請求方法 method: 'get', //是否顯示行間隔色 striped: true, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*) cache: false, //是否顯示分頁(*) pagination: true, //是否啟用排序 sortable: false, //排序方式 sortOrder: "asc", //初始化加載第一頁,默認第一頁 //我設置了這一項,但是貌似沒起作用,而且我這默認是0,- - //pageNumber:1, //每頁的記錄行數(shù)(*) pageSize: 10, //可供選擇的每頁的行數(shù)(*) pageList: [10, 25, 50, 100], //這個接口需要處理bootstrap table傳遞的固定參數(shù),并返回特定格式的json數(shù)據(jù) url: "/test/testtable.action", //默認值為 'limit',傳給服務端的參數(shù)為:limit, offset, search, sort, order Else //queryParamsType:'', ////查詢參數(shù),每次調(diào)用是會帶上這個參數(shù),可自定義 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可以自定義列顯示的內(nèi)容 //value:當前field的值,即id //row:當前行的數(shù)據(jù) var a = '<a href="" >測試</a>'; } }], pagination:true });
客戶端分頁
將sidePagination屬性設為“client”即可
服務器返回json數(shù)據(jù)必須包含data節(jié)點(展示數(shù)據(jù))
當數(shù)據(jù)量較少,只有上千條數(shù)據(jù)時,一次性將所有數(shù)據(jù)返回給客戶端,無論點下一頁,或搜索條件時,不向服務端發(fā)請求,實現(xiàn)全文檢索。
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于Ionic3實現(xiàn)選項卡切換并重新加載echarts
這篇文章主要介紹了基于Ionic3實現(xiàn)選項卡切換并重新加載echarts,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09JS簡單實現(xiàn)點擊跳轉(zhuǎn)登陸郵箱功能的方法
這篇文章主要介紹了JS簡單實現(xiàn)點擊跳轉(zhuǎn)登陸郵箱功能的方法,涉及js針對hash表的遍歷與頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-10-10javascript showModalDialog模態(tài)對話框使用說明
使用javascript打開模態(tài)對話框,想學習showModalDialog使用方法的朋友可以參考下。2009-12-12微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07