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">

• 1

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映射參數獲取

原文地址：http://blog.csdn.net/u013425609/article/details/51435731