分页一 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();
        }

### Layui 表格分页跳转问题解决方案 对于Layui表格分页无法正常跳转的问题,核心在于确保页面状态的致性和数据的正确加载。具体来说,在执行修改操作后刷新当前页而不跳转到第页的方法如下: 在页面初始化阶段,通过`table.render()`配置项来预加载所需的数据,从而保持用户的选择和输入内容[^1]。 为了防止在执行某些操作(如编辑或删除)后自动返回首页的情况发生,可以在这些操作完成后手动调用`reload`接口,并指定参数以维持原有的分页位置。这通常涉及到保存用户的交互历史记录,比如当前处于哪页、每页显示多少条目等信息。 另外个重要方面是在定义表格时启用工具栏选项`toolbar:true`,以便于集成更多自定义的功能按钮[^3]。然而需要注意的是,不同的应用场景下具体的实现细节可能会有所差异,但总体思路是致的——即保证前后端之间的良好通信以及前端逻辑处理得当[^2]。 下面是个简单的代码示例外加说明如何利用JavaScript控制分页行为: ```javascript layui.use(['table'], function(){ var table = layui.table; // 渲染初始表格 table.render({ elem: '#demo', url:'/your/data/source', // 数据源地址 page: true, limits:[5, 10, 15], limit:10, cols: [[ /* 列字段 */ ]] }); // 执行特定操作后的回调函数 function afterOperationCallback() { let currPage = getCurrentPage(); // 获取当前所在页码 // 重新加载表格的同时传递额外参数用于恢复之前的状态 table.reload('idOfTable', { where: {'currentPage': currPage}, page: { curr: currPage // 设置回原来的页数 } }); function getCurrentPage(){ return $(".layui-laypage-em").text(); } } }); ``` 此段脚本展示了怎样监听并响应各种事件,同时确保每次更新都能回到正确的分页视图中去。此外还提供了辅助性的`getCurrentPage`方法用来读取当前所处的具体页号。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值