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

使用bootstrap-table做分頁時候,我們可能會用到limit和pageNumber兩個參數(shù)傳遞給后臺。分頁處理的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 : '發(fā)布時間'}                           
                    ]
        });
});

這里設(shè)置sidePagination : 'server', 和queryParamsType: 'limit',

通過queryParams: queryParams,傳入?yún)?shù),queryParams代碼如下:

//查詢參數(shù)
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官網(wǎng)(http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/)中有這么一個說法,大概是queryParamsType設(shè)置為limit時候是沒有pageNumber返回的。

Paste_Image.png

解決辦法:

1、通過params.offset可以取得所要查詢也的起始數(shù)據(jù),在結(jié)合每頁數(shù)據(jù)limit,已經(jīng)足夠?qū)崿F(xiàn)數(shù)據(jù)庫分頁查詢了。

2、這種方法有點小麻煩,就是要修改bootstrap-table.min.js的源碼,首先在bootstrap-table.min.js中搜索 "limit"===this.options.queryParamsType&& (完全復(fù)制過去搜索,當(dāng)然因為版本的原因,一些版本代碼細(xì)微處可能不太一樣,但是肯定跟limit有關(guān),仔細(xì)找一下應(yīng)該還是可以找到的)找到下面的代碼片段:

"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(記得一定要英文逗號分隔)

最終修改后結(jié)果如下:

"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取到頁碼了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,734評論 18 399
  • 一、table控件基本使用方法: 安裝bootstrap-table插件: 添加相關(guān)依賴: 頁面編輯:基于boot...
    EldonZhao閱讀 5,087評論 2 5
  • 一. Java基礎(chǔ)部分.................................................
    wy_sure閱讀 4,012評論 0 11
  • 我們都是傻逼 做著自以為牛逼的游戲
    郭綠獅閱讀 152評論 0 1
  • 等外賣,點餐。等了1個半小時,這一個半小時老實說我什么都沒做,浪費了一個半小時的時間,god! 如何正確的活過一天...
    丹寧藍(lán)閱讀 399評論 0 0

友情鏈接更多精彩內(nèi)容