Layui 分页

Posted 2020-12-04 sword082419

第一步：添加引用

<link href="~/Content/layuiCMS/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layuiCMS/layui/layui.js"></script>

 

二、界面设计

<div class="layui-form news_list">
        <div class="layui-form users_list">
            <table class="layui-table">
                <colgroup>
                    <col width="50">
                    <col>
                    <col width="18%">
                    <col width="8%">
                    <col width="12%">
                    <col width="12%">
                    <col width="18%">
                    <col width="15%">
                </colgroup>
                <thead>
                    <tr>
                        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
                        <th>登录名</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="users_content"></tbody>
            </table>
        </div>
        <div id="page"></div>
    </div>

三、添加一个js文件，并将文件引入界面：

layui.config({
    base : "js/"
}).use([‘form‘,‘layer‘,‘jquery‘,‘laypage‘],function(){
    var form = layui.form(),
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage,
        $ = layui.jquery;

    //加载页面数据
    var usersData = ‘‘;
    $.get("/UserManage/GetInfo",{
        pageSize:10, //显示页面的数量
        pageindex:1 //当前页
    }, function (data) {
          usersData = data.rows;
          //执行加载数据的方法
          usersList(data.rows);
    })

    //表格数据和分页
    function usersList(that) {
        //渲染数据
        function renderDate(curr) {
            var datahtml = ‘‘;
            if (!that) {
                currData = usersData.concat().splice(curr * nums - nums, nums);
            } else {
                currData = that.concat().splice(curr * nums - nums, nums);
            }
            if (currData.length != 0) {
                for (var i = 0; i < currData.length; i++) {
                    dataHtml += ‘<tr>‘
                    + ‘<td><input type="checkbox" name="checked"  value="‘ + currData[i].Id + ‘" lay-skin="primary" lay-filter="choose"></td>‘
                    + ‘<td>‘ + currData[i].LoginName + ‘</td>‘
                    + ‘<td>‘ + currData[i].Name + ‘</td>‘
                    + ‘<td>‘ + currData[i].Sex + ‘</td>‘
                    + ‘<td>‘ + currData[i].Email + ‘</td>‘
                    + ‘<td>‘ + currData[i].Address + ‘</td>‘
                    + ‘<td>‘ + currData[i].Birth + ‘</td>‘
                    + ‘<td>‘
                    + ‘<a class="layui-btn layui-btn-mini users_edit layui-btn-mini"><i class="iconfont icon-edit"></i> 编辑</a>‘
                    + ‘<a class="layui-btn layui-btn-danger layui-btn-mini users_del" data-id="‘ + currData[i].Id + ‘"><i class="layui-icon"></i> 删除</a>‘
                    + ‘</td>‘
                    + ‘</tr>‘;
                }
            } else {
                dataHtml = ‘<tr><td colspan="8">暂无数据</td></tr>‘;
            }
            return dataHtml;
        }

        //分页
        var nums = 10; //每页出现的数据量
        laypage({
            cont: "page",
            pages: Math.ceil(usersData.length / nums), //得到总页数
            skip: true, //是否开启跳页
            groups: 5, //连续显示分页数
            jump: function (obj) {
                $(".users_content").html(renderDate(obj.curr));   //渲染数据
                $(‘.users_list thead input[type="checkbox"]‘).prop("checked", false);
                form.render(); //渲染表单
            }
        })
    }

    //全选
    form.on(‘checkbox(allChoose)‘, function (data) {
        var child = $(data.elem).parents(‘table‘).find(‘tbody input[type="checkbox"]:not([name="show"])‘);
        child.each(function (index, item) {
            item.checked = data.elem.checked;
        });
        form.render(‘checkbox‘);
    });

    //通过判断文章是否全部选中来确定全选按钮是否选中
    form.on("checkbox(choose)", function (data) {
        var child = $(data.elem).parents(‘table‘).find(‘tbody input[type="checkbox"]:not([name="show"])‘);
        var childChecked = $(data.elem).parents(‘table‘).find(‘tbody input[type="checkbox"]:not([name="show"]):checked‘)
        if (childChecked.length == child.length) {
            $(data.elem).parents(‘table‘).find(‘thead input#allChoose‘).get(0).checked = true;
        } else {
            $(data.elem).parents(‘table‘).find(‘thead input#allChoose‘).get(0).checked = false;
        }
        form.render(‘checkbox‘);
    })

})

 

后台控制器：

   public ActionResult GetInfo(int pageSize, int pageIndex)
        {
               //使用EF框架的增删改查和分页的公共类
                BaseRepository<Articles> db = new BaseRepository<Articles>();
                int total;
                Func<Articles, bool> where = s => s.ID > 0 && s.Type == 2;
                Func<Articles, int> order = s => s.ID;
                var list = db.LoadPagerEntities(pageSize, pageIndex, out total, where, false, order).ToList();
                var dic = new Dictionary<string, object>
                {
                    {"rows",list },
                    {"total", total}
                };
                return Json(dic, JsonRequestBehavior.AllowGet);
        }