• 当前位置: 首页 / 建站百科 / 常见问题
  • layui2.7.6简单实现table分页功能

    时间:2022-12-13 浏览量: 收藏

    html代码:

    <!-- 引入 layui.css -->
    <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
     
    <!-- 引入 layui.js -->
    <script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
     
    <table class="layui-hide"  id="demo"></table>
    <script>
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#demo'//对应着Table的ID
                , method: 'get'
                , toolbar: 'default'
                , url: '/Demo/GetJson2'//URL为数据接口的地址
                , request: {  //自定义 page  limit
                    pageName: 'pageNo',    //页码的参数名称,默认:page
                    limitName: 'pageSize'  //每页数据量的参数名,默认:limit
                }
                , parseData: function (res) {
                    return {
                        "code": 0,//数据类型,必须的
                        "count": res.count,//总记录数,用于分页
                        "data": res.data,//必须的
                    }
                }
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                , cols: [[
                    { field: 'id', title: '编号', width: 80, sort: true }
                    , { field: 'name', title: '姓名', width: 100, sort: true }
                    , { field: 'age', title: '年龄', width: 80, sort: true}
                    , { field: 'sex', title: '性别', width: 80, sort: true }
                ]],
                limits: [15, 30, 50, 100],
                limit: 15,
                page: true,
            });
        });
    </script>

    生成模拟数据:

    //模拟生成一个JSON
    public ActionResult GetJson2(int pageNo, int pageSize)
    {
                Random ra = new Random();//随机数
                int count = pageSize * 10;//总记录数
     
                string json = "";
                json += "{";
                json += "\"count\":" + count + ",";
     
                string data = "\"data\":[";
                for (int i = ((pageNo - 1) * pageSize); i < (pageNo * pageSize); i++)
                {
                    if (data == "\"data\":[")
                    {
                        data += "{\"id\":" + (i + 1) + ",\"name\":\"姓名_" + (i + 1).ToString() + "\",\"age\":" + ra.Next(10, 30) + ",\"sex\":\"" + ((i % 3 == 0) ? "女" : "男") + "\"}";
                    }
                    else
                    {
                        data += ",{\"id\":" + (i + 1) + ",\"name\":\"姓名_" + (i + 1).ToString() + "\",\"age\":" + ra.Next(10, 30) + ",\"sex\":\"" + ((i % 3 == 0) ? "女" : "男") + "\"}";
                    }
                }
                json += data + "]";
     
                json += "}";
     
                return Content(json);
    }

    生成的Json数据

    {"count":150,"data":[{"id":1,"name":"姓名_1","age":10,"sex":"女"},{"id":2,"name":"姓名_2","age":20,"sex":"男"},{"id":3,"name":"姓名_3","age":20,"sex":"男"},{"id":4,"name":"姓名_4","age":17,"sex":"女"},{"id":5,"name":"姓名_5","age":14,"sex":"男"},{"id":6,"name":"姓名_6","age":12,"sex":"男"},{"id":7,"name":"姓名_7","age":16,"sex":"女"},{"id":8,"name":"姓名_8","age":14,"sex":"男"},{"id":9,"name":"姓名_9","age":14,"sex":"男"},{"id":10,"name":"姓名_10","age":13,"sex":"女"},{"id":11,"name":"姓名_11","age":13,"sex":"男"},{"id":12,"name":"姓名_12","age":25,"sex":"男"},{"id":13,"name":"姓名_13","age":28,"sex":"女"},{"id":14,"name":"姓名_14","age":22,"sex":"男"},{"id":15,"name":"姓名_15","age":28,"sex":"男"}]}

    效果预览:

    layui2.7.6简单实现table分页功能(图1)

    简单说明:

    开启分页功能:  page: true,

    当前每页记录数: limit: 15,

    记录数可选的集合: limits: [15, 30, 50, 100],

    从layui传递给mvc的分页参数: request: { pageName: 'pageNo', limitName: 'pageSize' }

    在mvc接收layui传来分页参数: public ActionResult GetJson2(int pageNo, int pageSize)

    layui接收mvc传来的值: 

    parseData: function (res) {               

    return {

            "code": 0,//数据类型,必须的

            "count": res.count,//总记录数,用于分页

            "data": res.data,//必须的

        }

    }


    layui2.7.6    

    顶一下
    (0)
    0.00%
    踩一下
    0
    0.00%

    加载中~

    Copyright © 2012-2024 世敏网络 版权所有   闽ICP备18026760号-1    闽公网安备 35020502000640号   网站地图    Sitemap   关键词聚合

    世敏网络

    您已成功复制微信号,去微信立即添加好友!

    打开微信

    Wechart

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?