最开始我的数据绑定使用的razor语法来绑定的 就像下面这样
@if (ViewBag.listBlog != null)
{
foreach (var item in ViewBag.listBlog)
{
编辑
}
}
但是这种做法用来做分页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 += '
html += '
html += '
html += '
html += '
html += '
html += '
html += '编辑';
html += '';
html += '
html += '
})
$("#tbody").html(html);
}
});
}
可以看到 这个方法其实就是接收当前页 然后访问分页的接口获取到数据集合 在将数据集合用拼接的方式加到div中 其实这里也可以不使用拼接的方式 而是使用layui的数据模板功能。
关于laypage的分页大致就如此
其实layui若果单纯是表格的话 用它自身的数据表格实现分页/查询等会更方便