官网地址:https://www.layui.com/doc/modules/laypage.html
前端代码
<link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all">
<div id="contaniner">
<section>
@foreach (var item in ViewBag.DataList)
{
<div><img src="1.jpg" οnclick="WebSocketTest('@item.url',this)" width="100%" height="100%" /></div>
}
</section>
</div>
<div id="test1"></div>
<script src="~/Content/layui/layui.js"></script>
<script>
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
, count: @ViewBag.DataCount //数据总数,从服务端得到
, limit: 4
, curr: location.hash.replace('#!fenye=', '') //获取起始页
, hash: 'fenye' //自定义hash值
, jump: function (obj, first) {
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
location.href = "?curr=" + obj.curr+"&limit=" + obj.limit + "&#!fenye=" + obj.curr;
}
}
});
});
</script>
后端代码
public ActionResult Index4(int curr = 1, int limit = 4)
{
using (IDbConnection connection = new MySqlConnection(connStr))
{
int offset = (curr - 1) * limit;
string query = "SELECT * from websocket_urls limit @limit offset @offset";
ViewBag.DataList = connection.Query<dynamic>(query, new { @limit = limit, @offset = offset, }).ToList();
string queryCount = "SELECT count(*) from websocket_urls ";
ViewBag.DataCount = connection.QuerySingle<int>(queryCount);
}
return View();
}