需求描述:
ui层以表格形式展示后端选项,并实现分页。
现有状态:
后端代码已实现分页,意思是只要传入当前页码及要每页要显示多少行即可。
实现:
技术:bootstrap-table,jquery,html,css
相关代码举例:
后端url请求:curl “http://****/service/oplogs?page=1&pagesize=5”
首先需要引入:bootstrap-table相关css及js(bootstrap-table.css,bootstrap-table.js等)
html代码:<table id="opLogs_table"></table>
js代码:
var t = $('#opLogs_table').bootstrapTable({
url:'/service/oplogs',//url,不包含参数,参数处理在queryParams定义的函数中处理
method: 'get',
dataType: "json",
dataField: "data",//默认是rows,要跟responsehandler中数据保持一致
cache: true,
striped: true,
undefinedText: "空",
pagination: true,
showToggle: "true",
showColumns: "true",
pageNumber: 1,
showPaginationSwitch:false,
pageSize: 5,
pageList: [5, 10, 20, 40],
paginationPreText: '‹',
paginationNextText: '›',
search: false,
sidePagination: "server", //服务端分页
showToggle:false,
cardView: false,
detailView: false,
showColumns: false,
queryParams: function (params) {
return {
page: params.offset/params.limit+1, //当前页
pagesize: params.limit
};
},
responseHandler:responseHandler,//加载服务器数据之前的处理程序
columns: [
{
field: 'No.',
title: 'No.',
align: 'center',
formatter: function (value, row, index) {//增加序列号
var pageSize=$('#opLogs_table').bootstrapTable('getOptions').pageSize;
var pageNumber=$('#opLogs_table').bootstrapTable('getOptions').pageNumber;
return pageSize * (pageNumber - 1) + index + 1;
}
},
{
title: '修改记录ID',
field: 'id',
align: 'center'
},
{
title: '工号',
field: 'code',
align: 'center'
},
{
title: '姓名',
field: 'name',
align: 'center'
},
{
title: '操作时间',
field: 'ctime',
align: 'center'
},
{
title: '操作日志',
field: 'msg',
formatter: function (value, row, index) {//自定义显示,这三个参数分别是:value该行的属性,row该行记录,index该行下标
return escapeHtml(value);
}
}
]
});
t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
console.log("load success");
$(".pull-right").css("display", "block");
});
}
function responseHandler(result){
return {
total : result.total,
data : result.logs
};
};
bootstrap-table相关注释:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/