layui实现自动分页以及数据表格的重载
在我们直接用layui的表格的接收后台全部数据的时候，所有数据会在同一页显示，无法实现自动分页，最近写项目的时候碰到了这个问题，把我的解决办法记录下来，以后可能会用到。加一条实现搜索的功能
html部分
<div class="layuimini-container" style="margin-top: 60px">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息legend>
<div style="margin: 10px 10px 10px 10px">
<div class="layui-form-item">
<div class="layui-inline">
js部分
layui.use(['form', 'table','laydate','laypage'], function () {
var $ = layui.jquery,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '../api/table2.1.json',//你自己的接口
toolbar: 'true',//头部工具栏
height:500,//表格高度
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 130, title: '事务ID', sort: true},
{field: 'title', width: 250, title: '事务标题'},
{field: 'type', width: 150, title: '事务类型'},
{field: 'task', width: 150, title: '事务分类'},
{field: 'create_time', width: 200, title: '发布时间', sort: true},
{field: 'finish-time', width: 200, title: '截止时间', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
skin: 'row '//设定表格各种外观、尺寸等
,id: 'tableAll'//设定容器唯一 id。
,page: true//开启分页
, limits: [10, 15, 20] //一页选择显示3,5或10条数据
, limit: 10 //一页显示6条数据
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
// console.log(this);
// console.log(JSON.stringify(res));
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
}
else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
//数据表格的重载
$('.layui-btn').click(function () {
table.reload('tableAll', {
url: '../api/table2.1search.json'//向后台发送请求
,methods:"post"
,where: {
title :$('#title').val(),//搜索条件
start:$('#start').val(),
end:$('#end').val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
})
});