本文例項講述了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: '測試標識',{
      field: 'testname',title: '測試名字',{
      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的處理參考了下面這個哥們的博文，在此感謝！

參考連結:
https://www.jb51.net/article/129039.htm

PS：關於bootstrap佈局，這裡再為大家推薦一款本站的線上視覺化佈局工具供大家參考使用：

線上bootstrap視覺化佈局編輯工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述對大家基於bootstrap的程式設計有所幫助。