BootStrap Table分页问题pageNumber/offset

前端分页如下

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-table.min.css"/>
<form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
    <div class="form-group">
      <label for="nickname">名称:</label>
      <input type="text" class="form-control" name="nickname" id="nickname"  placeholder="请输入名称"/>
    </div>
    <div class="form-group">
      <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
    </div>
  </form>
</div>
<div class="container" style="width: 95%">
  <table id="tradeList"/>
</div>
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>  <!-- 汉化 -->
<script type="application/javascript">
  $(function () {
        //初始化Table
        var oTable = new TableInit();
        oTable.Init();
    });

    function doQuery(params){
        $('#tradeList').bootstrapTable('refresh');    //刷新表格
    }

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tradeList').bootstrapTable({
                contentType: "application/x-www-form-urlencoded",//必须要有!!!!
                url: '/user/list',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                dataType: 'json',
                toolbar: '#query',                //工具按钮用哪个容器  
                pagination: true,                   //是否显示分页(*)
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                clickToSelect: true,                //是否启用点击选中行
                height: $(window).height() - 100,   //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                width: $(window).width() - 10,
                uniqueId: "id",                     //每一行的唯一标识,一般为主键列
                queryParamsType : "",
                responseHandler: oTableInit.responseHandler,
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等,正在加载中...";
                },
                columns: [
                {
                    field: 'companyId',
                    checkbox: true
                },{
                    field: '',
                    title: '序号',
                    formatter: function (value, row, index) {
                        return index + 1;
                    },
                    align: 'center'
                }, {
                    field: 'nickname',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'email',
                    title: '邮箱/登陆名',
                    align: 'center'
                }, {
                    field: 'createTime',
                    title: '录入时间',
                    align: 'center'
                        /*,
                    formatter : function (value, row, index){
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }*/
                }, {
                    field: 'lastLoginTime',
                    title: '最近登陆时间'
                        /*,
                    formatter : function (value, row, index){
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }*/,
                    align: 'center'
                }, {
                    field: 'status',
                    title: '状态',
                    formatter : function (value, row, index){
                        return value == 1 ? '启用' : '禁用';
                    },
                    align: 'center'
                }, {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    formatter:function(value,row,index){
                        var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';
                        var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> ';
                        return e+d;
                    }
                }]
            });
        };

        oTableInit.responseHandler = function(res) { //数据筛选
            if (res) {
                return {
                    "rows" : res.list,
                    "total" : res.total
                };
            } else {
                return {
                    "rows" : [],
                    "total" : 0
                };
            }
        }

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { 
                pageSize : params.pageSize,
                pageNum : params.pageNumber
            };
            $.each(params, function (index, value) {
                console.log(index+"---"+value);
            })
            return temp;
        };
        return oTableInit;
    };
</script>

后台分页使用的PageHelper;queryParams 中出的问题

//获取参数方法  **queryParamsType  默认为 limit**
function getParams(params) {
     var temp = {
          pageSize : params.limit,
          offset: params.offset
     };
     return temp;
}
//获取参数   **queryParamsType : ""**
function getParams(params) {
    var temp = { 
        pageSize : params.pageSize, 
        pageNumber : params.pageNumber
    };
    return temp;
}

完毕

参考http://www.mamicode.com/info-detail-1318124.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值