BootStrap Table和Mybatis Plus實現服務端分頁

一、后台java代碼（Mybatis Plus分頁）

　　（1）Mybatis Plus分頁的配置，在mybatis的xml文件中增加如下配置（Mybatis Plus官方文檔：http://baomidou.oschina.io/mybatis-plus-doc/#/quick-start）

　　　　 <!-- 插件配置項 -->
        <property name="plugins">
            <array>
                <!-- 分頁插件配置 -->
                <bean id="paginationInterceptor"
                    class="com.baomidou.mybatisplus.plugins.PaginationInterceptor">
                    <property name="dialectType" value="mysql" />
                </bean>
            </array>
        </property>

　　（2）mapper

　　List<Entity> selectPageById(Pagination page,String id);//Pagination 為Mybatis plus分頁插件的實體

　　（3）service

    /**
     * 分頁查詢
     */
    public Page<Entity> selectPageById(Page<Entity> page,Stringid) {
        Page<Entity> limitPage = page.setRecords(informationCodeMapper.selectPageById(page,id));
        return limitPage;
    }

　　（3）controller(注意：mybatis plus的分頁時，查詢的數據存放在records屬性中)

   /**
     * BootStrap Table分頁
     * @param pageNumber 頁數
     * @param pageSize 每頁顯示數據的條數
     * @param request
     * @return
     */
    @RequestMapping("/pageTest.shtml")
    @ResponseBody
    public String informationList(String pageNumber, String pageSize, String id, HttpServletRequest request) {
        if(!StringUtils.isNotBlank(pageNumber) & !StringUtils.isNotBlank(pageSize)){
            pageNumber="1";
            pageSize="10";
        }
        //分頁 pageNumber--》頁數    pageSize--》每頁顯示數據的條數
        int page_Num = Integer.parseInt(pageNumber);
        int page_Size = Integer.parseInt(pageSize);
        Page<Entity> page = new Page<Entity>(page_Num, page_Size);
        Page<Entity> selectPageByCsdbId = informationService.selectPageById(page, csdbId);
        //bootstrap-table要求服務器返回的json須包含：total，rows
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("total", selectPageById.getTotal());
        map.put("rows", selectPageById.getRecords());
        return JSON.toJSONString(map);
    }

二、前台js （BootStrap Table分頁）

$(function(){
    /*boostrap table*/
    $('#informationTable').bootstrapTable({
        columns: [{
            field: 'checkBox',
            checkbox:true,
            align:"center"
        }, {
            field: 'id',
            title: 'ID',
            visible : false,//隱藏該列
            align:"center"            
        }, {
            field: 'informationCode',
            title: 'Information Code',
            align:"center",
        }, {
            field: 'infoName',
            title: 'InfoName',
            align:"center",
        },{
            field:"suggesteddmtype",
            title:"Suggested Dm Type",
            align:"center",
            class:"table-select2",
        },{
            field:"operation",
            title:"操作",
            align:"center",
            formatter : "actionFormatter",//自定義方法
        }],
        method: 'post',
        contentType: "application/x-www-form-urlencoded",//必須要有！因為bootstap table使用的是ajax方式獲取數據，這時會將請求的content type默認設置為 text/plain，這樣在服務端直接通過 @RequestParam參數映射是獲取不到的。
        url:"pageTest.shtml?time="+getTimestamp,//要請求數據的文件路徑,加時間戳，防止讀取緩存數據
        sortable: true, //是否啟用排序 
        sortOrder: "informationCode asc", //排序方式
        pagination: true,//是否開啟分頁（*）啟動分頁，必須設為true
        queryParamsType:'',//注意:查詢參數組織方式，默認值為 'limit',在默認情況下 傳給服務端的參數為：offset,limit,sort 。 設置為 '' 在這種情況下傳給服務器的參數為：pageSize,pageNumber
        queryParams:queryParams,//請求服務器時所傳的參數
        pageNumber:1,//初始化加載第一頁，默認第一頁
        pageSize: 10,//每頁的記錄行數（*）
        pageList: [10,20,30,50],//可供選擇的每頁的行數（*）
        sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
        toolbar:".custom-btn-list"
    });
})

//得到查詢的參數
function queryParams (params) {
    var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
        pageSize: params.pageSize,  //頁面大小
        pageNumber: params.pageNumber, //頁碼
        searchText : params.searchText,
    };
    return temp;
};}

 

三、結果展示