分页一 layui.laypage 使用记录

官网地址：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();
        }