第一次使用Layui 分页-白红宇

第一次使用Layui 分页

阅读量：5037 次

发布时间：2019-06-12

本文共 4484 字，大约阅读时间需要 14 分钟。

第一步：添加引用

二、界面设计


             
                  
       
                                                                                                                                                                                                                                                                                                                                                                                                                 登录名                                   姓名                                   性别                                   邮箱                                   地址                                   时间                                   操作

三、添加一个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 += ''                    + ''                    + '' + currData[i].LoginName + ''                    + '' + currData[i].Name + ''                    + '' + currData[i].Sex + ''                    + '' + currData[i].Email + ''                    + '' + currData[i].Address + ''                    + '' + currData[i].Birth + ''                    + ''                    + ' 编辑'                    + ' 删除'                    + ''                    + '';                }            } else {                dataHtml = '暂无数据';            }            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
     
       db = new BaseRepository
      
       ();                int total;                Func
       
         where = s => s.ID > 0 && s.Type == 2;                Func
        
          order = s => s.ID;                var list = db.LoadPagerEntities(pageSize, pageIndex, out total, where, false, order).ToList();                var dic = new Dictionary
         
                          {                    {
    "rows",list },                    {
    "total", total}                };                return Json(dic, JsonRequestBehavior.AllowGet);        }