16122二、Bootstrap table 服務器端分頁示例

bootstrap版本 爲 3.X

bootstrap-table.min.css 
bootstrap-table-zh-CN.min.js 
bootstrap-table.min.js

前端bootstrap+jQuery，服務端使用spring MVC實現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, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） url: "/testProject/page4list.json",//這個接口須要處理bootstrap table傳遞的固定參數 queryParamsType:'', //默認值爲 'limit' ,在默認狀況下 傳給服務端的參數爲：offset,limit,sort // 設置爲 '' 在這種狀況下傳給服務器的參數爲：pageSize,pageNumber //queryParams: queryParams,//前端調用服務時，會默認傳遞上邊提到的參數，若是須要添加自定義參數，能夠自定義一個函數返回請求參數 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） //search: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大 strictSearch: true, //showColumns: true, //是否顯示全部的列 //showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少容許的列數 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能夠自定義列顯示的內容 //value：當前field的值，即id //row：當前行的數據 var a = '<a href="" >測試</a>'; } }], pagination:true }); }

 

在前端經過請求獲取table數據時，bootstrap table會默認拼一個 searchText的參數，來支持查詢功能。

服務端代碼

@RequestMapping(value = "/page4list.json") public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request, HttpServletResponse response) { //搜索框功能 //當查詢條件中包含中文時，get請求默認會使用ISO-8859-1編碼請求參數，在服務端須要對其解碼 if (null != searchText) { try { searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8"); } catch (Exception e) { e.printStackTrace(); } } //在service經過條件查詢獲取指定頁的數據的list List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText); //根據查詢條件，獲取符合查詢條件的數據總量 int total = mwMsgQueueService.queryCountBySearchText(searchText); //本身封裝的數據返回類型，bootstrap-table要求服務器返回的json數據必須包含：totlal，rows兩個節點 PageResultForBootstrap page = new PageResultForBootstrap(); page.setTotal(total); page.setRows(list); //page就是最終返回給客戶端的數據結構，能夠直接返回給前端 //下邊這段，只是我本身的代碼有自定義的spring HandlerInterceptor處理返回值，能夠忽略。 request.setAttribute(Constants.pageResultData, page); }

完成上述代碼，便可實現服務器端自動分頁，bootstrap-table根據服務器端返回的total，以及table設定的pageSize，自動生成分頁的頁面元素，每次點擊下一頁或者指定頁碼，bootstrap-table會自動給參數pageNumber賦值，服務器返回指定頁的數據。

若是發送的是post請求，由於bootstap table使用的是ajax方式獲取數據，這時會將請求的content type默認設置爲 text/plain，這樣在服務端直接經過 @RequestParam參數映射是獲取不到的。

這時就須要在bootstrap-table的參數列表中顯式設置

contentType: "application/x-www-form-urlencoded"

設置成form表單的形式，tomcat內部就會自動將requset payload中的數據部分解析放到request.getParameter()中，以後就能夠直接經過@RequestParam映射參數獲取

post的處理參考了下面這個哥們的博文，在此感謝！

參考連接