bootstrap-table分頁params.pageNumber無法取到值的問題

使用bootstrap-table做分頁時候，我們可能會用到limit和pageNumber兩個參數傳遞給後臺。分頁處理的js如下：

$(function() {
    $('#dataGrid').bootstrapTable(
        {
            url : 'article/selectListByType',
            method : 'post',
            toolbar : '#toolbar',
            contentType : 'application/x-www-form-urlencoded',
            striped : true,
            showColumns : true,
            showRefresh : true,
            pagination : true,
            pageSize : 10,
            sortName : 'id',
            sidePagination : 'server',
            queryParamsType: 'limit',
            queryParams: queryParams,
            columns : [
                    {
                        checkbox : true
                    },
                    {field : 'id',title : '新聞ID',align : 'center',align : 'left',editor : "text"},
                    {field : 'lastModTime',title : '發佈時間'}                           
                    ]
        });
});

這裏設置sidePagination : 'server', 和queryParamsType: 'limit',

通過queryParams: queryParams,傳入參數，queryParams代碼如下：

//查詢參數
function queryParams(params) {
    return {
        limit: params.limit,
        offset: params.offset,
        nextPage: params.pageNumber,
        
        typeId : $('#typeId').val(),
        searchName : $('#searchName').val(),
        searchUrl : $('#searchUrl').val(),
    };
}

這段代碼中的params.limit是成功取到值的，但是params.pageNumber卻是無法取到值，怎麼回事呢？

bootstrap-table官網（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）中有這麼一個說法，大概是queryParamsType設置爲limit時候是沒有pageNumber返回的。

Paste_Image.png

解決辦法：

1、通過params.offset可以取得所要查詢也的起始數據，在結合每頁數據limit，已經足夠實現數據庫分頁查詢了。

2、這種方法有點小麻煩，就是要修改bootstrap-table.min.js的源碼，首先在bootstrap-table.min.js中搜索 "limit"===this.options.queryParamsType&& （完全複製過去搜索，當然因爲版本的原因，一些版本代碼細微處可能不太一樣，但是肯定跟limit有關，仔細找一下應該還是可以找到的）找到下面的代碼片段：

"limit"===this.options.queryParamsType&&(i={search:i.searchText,sort:i.sortName,order:i.sortOrder},this.options.pagination&&(i.offset=this.options.pageSize===this.options.formatAllRows()?0:this.options.pageSize*(this.options.pageNumber-1),i.limit=this.options.pageSize===this.options.formatAllRows()?this.options.totalRows:this.options.pageSize))

由於源碼文件沒有格式，所以就是一行，比較難看，修改時候小心一點就好了，可以看到在this.options.pagination&&後面的括號中有i.offset=...，i.limit=...，的代碼，在i.limit=this.options.pageSize===this.options.formatAllRows()?this.options.totalRows:this.options.pageSize後面加上, i.pageNumber=this.options.pageNumber（記得一定要英文逗號分隔）

最終修改後結果如下：

"limit"===this.options.queryParamsType&&(i={search:i.searchText,sort:i.sortName,order:i.sortOrder},this.options.pagination&&(i.offset=this.options.pageSize===this.options.formatAllRows()?0:this.options.pageSize*(this.options.pageNumber-1),i.limit=this.options.pageSize===this.options.formatAllRows()?this.options.totalRows:this.options.pageSize, i.pageNumber=this.options.pageNumber))

這樣子就可以通過params.pageNumber取到頁碼了。

原作者：https://www.jianshu.com/p/8ab488a8d259