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

