關於bootstrap table的server分頁

首先是bootstrap初始化的表格參數：

// 初始化Table
    oTableInit.Init = function() {
            $('#booksTable').bootstrapTable({
            url : '/TestWeb/booksTable', // 請求後臺的URL（*）
            method : 'get', // 請求方式（*）
            toolbar : '#toolbar', // 工具按鈕用哪一個容器
            striped : true, // 是否顯示行間隔色
            cache : false, // 是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
            pagination : true, // 是否顯示分頁（*）
            sortable : false, // 是否啓用排序
            sortOrder : "asc", // 排序方式
            queryParams : oTableInit.queryParams,// 傳遞參數（*）
            sidePagination : "server", // 分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber : 1, // 初始化加載第一頁，默認第一頁
            pageSize : 10, // 每頁的記錄行數（*）
            pageList : [ 10, 25, 50, 100 ], // 可供選擇的每頁的行數（*）
            search : false, // 是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
            strictSearch : false,
            showColumns : true, // 是否顯示全部的列
            showRefresh : true, // 是否顯示刷新按鈕
            minimumCountColumns : 2, // 最少容許的列數
            clickToSelect : true, // 是否啓用點擊選中行
            height : 500, // 行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
            uniqueId : "ID", // 每一行的惟一標識，通常爲主鍵列
            showToggle : true, // 是否顯示詳細視圖和列表視圖的切換按鈕
            cardView : false, // 是否顯示詳細視圖
            detailView : false, // 是否顯示父子表
            columns : [ {
                radio : true
            }, {
                field : 'bookName',
                title : '書本名稱'
            }, {
                field : 'price',
                title : '書本價格'
            }, {
                field : 'time',
                title : '書本入庫時間'
            }, {
                field : 'status',
                title : '是否借出'
            }, ]
        });
    };

而後是前端要傳給後端的參數：

oTableInit.queryParams = function(params) {

        /*
        var temp = { //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
            limit : params.limit, //頁面大小
            offset : params.offset, //頁碼
            bookName : $("#txt_search_bookName").val()
        };
         */

        if (!params)
            return {
                bookName : $("#txt_search_bookName").val()
            //bookName : "fuck"
            };
        var temp = { // 這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
            limit : params.limit, // 頁面大小
            offset : params.offset, // 頁碼
            search : params.search,
            bookName : $("#txt_search_bookName").val()
        //bookName : "fuck you"
        };

        return temp;
    };

這裏的params是框架的table自動提供的，而後limit是頁面大小，就是你一面顯示多少行數據，也就是params會把你寫的pageSize傳過去。

而後這個offset是頁碼，好比說如今是第一頁（limit=10），而後框架幫你傳過去的的offset是0也就是從0開始，顯示limit個數據，若是是第二頁，offset是10，以此類推。

而後是後端的關鍵代碼，server分頁關鍵就是要告訴前端total幾行，還有就是一頁中的數據rows，rows數據是個json數組，裏面每個數據都是一個表格中行的json對象。看一下關鍵代碼：

public  Map<String,Object> getPageBase(){
        
        int total=list.size();//list是dao層返回的全部數據的一個list
        Map<String,Object> result = new HashMap<String,Object>();
        List<Object> lists = new ArrayList<Object>(); 
        //判斷總數是否大於頁碼的大小，大於則按照正常頁碼獲取顯示的數據，不然按照數據計算的頁碼，獲取顯示數據
        if(total>offset){
            for(int i=offset;i<total && i<(offset+limit);i++){
                lists.add(list.get(i));//lists是要返回給前端的rows數組
            }
        }else{
            int nums=total/limit;
            for(int i=nums*limit;i<total;i++){
                lists.add(list.get(i));
            }
        }
        result.put("total",total);
        result.put("rows",lists);
        return result;
        
    }

 

 

順便提一下，若是你傳給前端的rows裏面的數據有些沒有顯示出來，你也能夠經過row來獲取。好比個人id是不顯示出來，我仍然能夠經過像   getSelections等方法得到row的數據從而得到row.id這樣。  相似於：

data.field.id=medicinal.table.bootstrapTable('getSelections')[0].id;