第一次使用Layui 分頁

第一步：添加引用

<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);
        }

 

　　后來發現layui數據表格更好用