分页

最新推荐文章于 2022-08-02 12:22:58 发布

懒大白

最新推荐文章于 2022-08-02 12:22:58 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_44552244/article/details/108862707

版权

开发工具与关键技术：Visual Studio / Layui分页
作者：郑名方
撰写时间：2020年9月28日

这次所说的分页的：
第一种写法所说的是Layui.laypage的分页操作，的使用方法简单，比如一个盒子装着一个小盒子（“就是存放分页的容器），然后通过服务端得到相应的初始值就可以完成分页的渲染。

<title>jQuery</title>
    <link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
    
</head>
<body>
    <div id="test1"></div>
    <script src="~/Plugins/layui/layui.js"></script>
    <script>
        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
              , count: 50 //数据总数，从服务端得到
            });
        });
    </script>

下面是Layui.laypage的效果图。
在这里插入图片描述

第二种写法：所说的是Layui.page.limit:每页显示的条数。laypage将会借助 count 和 limit 计算出分页数;好limits:每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框。

   //1.0 页面数据绑定
        $(function () {
            //加载和初始化layui模块
            layui.use(['layer', 'table'], function () {
                layer = layui.layer;
                layuiTable = layui.table;
                //执行js渲染
                tabUserType = layuiTable.render({
                    elem: "#tabUserType",
                    url: "/JurisdictionManagement/Jurisdiction/SelectUserType",
                    cols: [[
                        { type: 'numbers', title: '序号' },
                        { field: 'UserTypeID', title: 'UserTypeID', hide: true },
                        { field: 'UserType', title: '角色' },
                        { field: 'Describe', title: '描述' },
                        { title: '身份', templet: setTypeClass },
                        { field: 'FoundTime', title: '创建时间', sort: true },
                        { title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }
                    ]],
     page: {
               limit: 11,//指定每页显示的条数
               limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
          }//开启分页
                //监听行单击事件（单击事件为：rowDouble)
                layuiTable.on('row(tabUserType)', function (obj) {
                    var data = obj.data;
                    //标注选中样式
                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                });
            });
        });

下面是效果图。
在这里插入图片描述

懒大白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页

开发工具与关键技术：Visual Studio / Layui分页作者：郑名方撰写时间：2020年9月28日这次所说的分页的：第一种写法所说的是Layui.laypage的分页操作，的使用方法简单，比如一个盒子装着一个小盒子（“就是存放分页的容器），然后通过服务端得到相应的初始值就可以完成分页的渲染。<title>jQuery</title> <link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.mi
复制链接

扫一扫