您的位置:首页 > Web前端 > BootStrap

bootstrapTable、PageHelper分页

2020-03-06 14:14 1856 查看

后台用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 '未找到与您相关的记录!';
}
});
}
```*
  • 点赞
  • 收藏
  • 分享
  • 文章举报
LXang723 发布了6 篇原创文章 · 获赞 0 · 访问量 134 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: