layui的laypage实现分页/查询

最开始我的数据绑定使用的razor语法来绑定的 就像下面这样

@if (ViewBag.listBlog != null)
{
foreach (var item in ViewBag.listBlog)
{
<tr>
<td>@item.CreateDate</td>
<td>@item.Title</td>
<td>@item.CaName</td>
<td>@item.VisitNum</td>
<td>@item.Sort</td>
<td>
<a href="/Admin/Blog/Edit?Id=@item.Id" class="layui-btn layui-btn-normal layui-btn-sm">编辑</a>
<button onclick="del(@item.Id)" class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
</td>
</tr>
}
}

但是这种做法用来做分页laypage是没办法的 不知道这种绑定方式有没有简单的分页方法 我自己没找到  加入找到的话再过来更新这个博客

下面我就用的是异步的接口来获取数据实现分页

第一步：引用必要的模块 访问获取数据总量的接口 在这个请求的回调函数中 使用laypager的渲染来渲染分页

layui.use(['layer', 'form', 'laypage'], function () {
var layer = layui.layer
var form = layui.form;
var laypage = layui.laypage;
var url = "/Admin/Blog/GetTotalCount?t=" + new Date().valueOf();
$.ajax({
url: url,
type: "GET",
success: function (res) {
//调用分页
laypage.render({
elem: 'pages'
, count: parseInt(res)
, limit: pageSize
, jump: function (obj) {
var pageIndex = obj.curr;
load_blog_data(pageIndex);
}
});

}
});

});

第二步：再laypage的jump回调函数中 这里表示点击了一个分页中的按钮 如数字或者下一页 此时 我们得到当前页是 var pageIndex = obj.curr;（来自laypage）

然后根据当前页 访问数据接口去获取数据 （这里将他封装在了方法里面：load_blog_data(pageIndex)）

下面看一下方法的具体写法：

/*加载第X页数据*/
function load_blog_data(pageIndex) {
var url = "/Admin/Blog/List?pageIndex=" + pageIndex + "&pageSize=" + pageSize;
$.ajax({
url: url,
type: "POST",
success: function (res) {
var html = "";
$.each(res, function (i, blog) {
html += '<tr>';
html += '<td>' + blog.createDate + '</td>';
html += '<td>' + blog.title + '</td>';
html += '<td>' + blog.caName + '</td>';
html += '<td>' + blog.visitNum + '</td>';
html += '<td>' + blog.sort + '</td>';
html += '<td>';
html += '<a href="/Admin/Blog/Edit?Id=' + blog.id + '" class="layui-btn layui-btn-normal layui-btn-sm">编辑</a>';
html += '<button onclick="del(' + blog.id + ')" class="layui-btn layui-btn-sm layui-btn-danger">删除</button>';
html += '</td>';
html += '</tr>';
})
$("#tbody").html(html);
}
});
}

可以看到 这个方法其实就是接收当前页 然后访问分页的接口获取到数据集合 在将数据集合用拼接的方式加到div中 其实这里也可以不使用拼接的方式 而是使用layui的数据模板功能。

关于laypage的分页大致就如此

其实layui若果单纯是表格的话 用它自身的数据表格实现分页/查询等会更方便