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