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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章