bootstrapTable、PageHelper分页

后台用PageHelper做的,后台要返回rows和total

function initSituationTable() {
    //$('#situation_table').bootstrapTable('destroy');
    $('#situation_table').bootstrapTable({
        url: "../mySysTest/getTestSituationTable",
        striped: true, // 是否显示行间隔色(斑马线)
        method: 'post',//post请求需要配置contentType,默认是get请求不需要配置
        pagination: true, // 是否显示分页(*)
        sidePagination: "server", // 分页方式:client客户端分页,server服务端分页(*)
        paginationLoop: true, // 当前页是边界时是否可以继续按
        queryParams: function (params) {
            console.log(params);
            var temp = {
                pageNum: params.offset/params.limit + 1,
                pageSize: params.limit,
            };
            console.log(temp);
            return JSON.stringify(temp);
        },
        paginationShowPageGo: true,
        showJumpto: true,
        pageNumber: 1, // 初始化加载第一页,默认第一页
        pageSize: 10, // 每页的记录行数(*)
        pageList: [10,20,30], // 可供选择的每页的行数(*)
        contentType: "application/json; charset=utf-8",// 一种编码。在post请求的时候需要用到。这里用的get请求,注释掉这句话也能拿到数据
        dataType: 'json',
        minimumCountColumns: 2, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        height: 650,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
        uniqueId: "id", // treeNodeId assetsId每一行的唯一标识,一般为主键列
        //showToggle : false, // 是否显示详细视图和列表视图的切换按钮
        //cardView : false, // 是否显示详细视图
        //detailView : false, // 是否显示父子表
        cache: true, // 设置为 false 禁用 AJAX
        sortable: true, // 是否启用排序
        sortOrder: "desc", // 排序方式
        sortName: 'editTime', // 要排序的字段
        columns: [
            {
                field: 'number',
                title: '序号',
                align: 'center',
                valign: 'middle',
                width: '5%',
                formatter: function (value, row, index) {
                    var pageSize = $('#situation_table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#situation_table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号: 每页条数 * (当前页 - 1 )+ 序号
                }
            },
            {
                field: 'id',
                title: '申请表id',
                visible: false
            }, {
                field: 'sysName',
                title: '系统名称',
                align: 'center',
                valign: 'middle',
                width: '25%'
            }, {
                field: 'appraisalStateId',
                title: '状态',
                align: 'center',
                valign: 'middle',
                width: '20%',
                formatter: function (value) {
                    if (value == 1) {
                        return "未提交";
                    } else {
                        return " ";
                    }
                }
            }, {
                field: 'appraisalStateId',
                title: '进度',
                align: 'center',
                valign: 'middle',
                width: '20%',
                events: operateEvents,
                formatter: progressPercent,
            }, {
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: '30%',
                events: operateEvents,
                formatter: addFunctionAlty,
            }],
        responseHandler: function (res) {
            return {
                    total: res.total,
                    rows: tableData
            };
        },
        onLoadSuccess: function (result) {
            //加载成功执行
            //toastr.info('数据获取成功');
        },
        onLoadError: function () {
            //加载失败执行
            //toastr.error('数据获取失败');
        },
        onClickRow: function (row, $element) {//bootstrapTable行点击事件
            //点击某行时执行
        },
        formatNoMatches: function () {
            return '未找到与您相关的记录!';
        }
    });
}
```*


posted @ 2019-11-19 15:54  柒月廿三  阅读(30)  评论(0)    收藏  举报  来源