最開始我的數據綁定使用的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若果單純是表格的話 用它自身的數據表格實現分頁/查詢等會更方便