Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法示例
本文實(shí)例講述了Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
bootstrap版本 為 3.X
bootstrap-table.min.css
bootstrap-table-zh-CN.min.js
bootstrap-table.min.js
前端bootstrap+jQuery,服務(wù)端使用spring MVC實(shí)現(xiàn)restful風(fēng)格服務(wù)
前端代碼塊
<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">
function initTable(){ $('#test-table').bootstrapTable({ method: 'get', toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*) pagination: true, //是否顯示分頁(yè)(*) sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 pageNumber:1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)(*) pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)(*) url: "/testProject/page4list.json",//這個(gè)接口需要處理bootstrap table傳遞的固定參數(shù) queryParamsType:'', //默認(rèn)值為 'limit' ,在默認(rèn)情況下 傳給服務(wù)端的參數(shù)為:offset,limit,sort // 設(shè)置為 '' 在這種情況下傳給服務(wù)器的參數(shù)為:pageSize,pageNumber //queryParams: queryParams,//前端調(diào)用服務(wù)時(shí),會(huì)默認(rèn)傳遞上邊提到的參數(shù),如果需要添加自定義參數(shù),可以自定義一個(gè)函數(shù)返回請(qǐng)求參數(shù) sidePagination: "server", //分頁(yè)方式:client客戶端分頁(yè),server服務(wù)端分頁(yè)(*) //search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會(huì)進(jìn)服務(wù)端,所以,個(gè)人感覺意義不大 strictSearch: true, //showColumns: true, //是否顯示所有的列 //showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數(shù) clickToSelect: true, //是否啟用點(diǎn)擊選中行 searchOnEnterKey: true, columns: [{ field: 'id', title: 'id', align: 'center' }, { field: 'testkey', title: '測(cè)試標(biāo)識(shí)', align: 'center' }, { field: 'testname', title: '測(cè)試名字', align: 'center' },{ field: 'id', title: '操作', align: 'center', formatter:function(value,row,index){ //通過(guò)formatter可以自定義列顯示的內(nèi)容 //value:當(dāng)前field的值,即id //row:當(dāng)前行的數(shù)據(jù) var a = '<a href="" >測(cè)試</a>'; } }], pagination:true }); }
在前端通過(guò)請(qǐng)求獲取table數(shù)據(jù)時(shí),bootstrap table會(huì)默認(rèn)拼一個(gè) searchText的參數(shù),來(lái)支持查詢功能。
服務(wù)端代碼
@RequestMapping(value = "/page4list.json") public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request, HttpServletResponse response) { //搜索框功能 //當(dāng)查詢條件中包含中文時(shí),get請(qǐng)求默認(rèn)會(huì)使用ISO-8859-1編碼請(qǐng)求參數(shù),在服務(wù)端需要對(duì)其解碼 if (null != searchText) { try { searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8"); } catch (Exception e) { e.printStackTrace(); } } //在service通過(guò)條件查詢獲取指定頁(yè)的數(shù)據(jù)的list List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText); //根據(jù)查詢條件,獲取符合查詢條件的數(shù)據(jù)總量 int total = mwMsgQueueService.queryCountBySearchText(searchText); //自己封裝的數(shù)據(jù)返回類型,bootstrap-table要求服務(wù)器返回的json數(shù)據(jù)必須包含:totlal,rows兩個(gè)節(jié)點(diǎn) PageResultForBootstrap page = new PageResultForBootstrap(); page.setTotal(total); page.setRows(list); //page就是最終返回給客戶端的數(shù)據(jù)結(jié)構(gòu),可以直接返回給前端 //下邊這段,只是我自己的代碼有自定義的spring HandlerInterceptor處理返回值,可以忽略。 request.setAttribute(Constants.pageResultData, page); }
完成上述代碼,即可實(shí)現(xiàn)服務(wù)器端自動(dòng)分頁(yè),bootstrap-table根據(jù)服務(wù)器端返回的total,以及table設(shè)定的pageSize,自動(dòng)生成分頁(yè)的頁(yè)面元素,每次點(diǎn)擊下一頁(yè)或者指定頁(yè)碼,bootstrap-table會(huì)自動(dòng)給參數(shù)pageNumber賦值,服務(wù)器返回指定頁(yè)的數(shù)據(jù)。
如果發(fā)送的是post請(qǐng)求,因?yàn)閎ootstap table使用的是ajax方式獲取數(shù)據(jù),這時(shí)會(huì)將請(qǐng)求的content type默認(rèn)設(shè)置為 text/plain,這樣在服務(wù)端直接通過(guò) @RequestParam參數(shù)映射是獲取不到的。
這時(shí)就需要在bootstrap-table的參數(shù)列表中顯式設(shè)置
contentType: "application/x-www-form-urlencoded"
設(shè)置成form表單的形式,tomcat內(nèi)部就會(huì)自動(dòng)將requset payload中的數(shù)據(jù)部分解析放到request.getParameter()中,之后就可以直接通過(guò)@RequestParam映射參數(shù)獲取
post的處理參考了下面這個(gè)哥們的博文,在此感謝!
參考鏈接:
http://chabaoo.cn/article/129039.htm
PS:關(guān)于bootstrap布局,這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用:
在線bootstrap可視化布局編輯工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述對(duì)大家基于bootstrap的程序設(shè)計(jì)有所幫助。
- bootstrap table表格插件之服務(wù)器端分頁(yè)實(shí)例代碼
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- bootstrap-table后端分頁(yè)功能完整實(shí)例
- Bootstrap table分頁(yè)問(wèn)題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
- bootstrap table插件的分頁(yè)與checkbox使用詳解
- BootStrap中Table分頁(yè)插件使用詳解
- BootStrap Table前臺(tái)和后臺(tái)分頁(yè)對(duì)JSON格式的要求
- bootstrap table分頁(yè)模板和獲取表中的ID方法
- 使用bootstraptable插件實(shí)現(xiàn)表格記錄的查詢、分頁(yè)、排序操作
- bootstrap-table實(shí)現(xiàn)服務(wù)器分頁(yè)的示例 (spring 后臺(tái))
- BootStrap Table后臺(tái)分頁(yè)時(shí)前臺(tái)刪除最后一頁(yè)所有數(shù)據(jù)refresh刷新后無(wú)數(shù)據(jù)問(wèn)題
相關(guān)文章
BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格,表格封裝了3個(gè)版本,接下來(lái)通過(guò)本文給大家展示下樣式及代碼,對(duì)bootstrap增刪改查相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-10-10JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02原生javascript+css3編寫的3D魔方動(dòng)畫旋扭特效
這篇文章主要介紹了原生javascript+css3編寫的3D魔方動(dòng)畫旋扭特效的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03JavaScript類的繼承多種實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript類的繼承多種實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05Javascript實(shí)現(xiàn)禁止輸入中文或英文的例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)禁止輸入中文或英文的方法實(shí)例,本文方法都是使用正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-12-12JavaScript學(xué)習(xí)小結(jié)(一)——JavaScript入門基礎(chǔ)
本教程比較適合javascript初學(xué)者,對(duì)javascript基本知識(shí)的小結(jié)包括變量,基本類型等知識(shí)點(diǎn),需要的朋友一起來(lái)學(xué)習(xí)吧2015-09-09js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法
這篇文章主要介紹了js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法嗎,3種方法都具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式,本文同時(shí)講解了設(shè)計(jì)模式的類別如創(chuàng)建型設(shè)計(jì)模式、結(jié)構(gòu)型設(shè)計(jì)模式、行為設(shè)計(jì)模式等內(nèi)容,需要的朋友可以參考下2015-02-02js的.innerHTML = ""IE9下顯示有錯(cuò)誤的解決方法
js的.innerHTML= "……"在ie9- 的版本顯示不正常,使用jquery可以解決,有類似問(wèn)題的朋友可以參考下2013-09-09