layui 简单实现 TABLE 分页功能

djk8888

已于 2022-08-08 15:07:32 修改

阅读量2.6k

点赞数 2

文章标签： layui servlet 前端

于 2022-08-04 17:26:15 首次发布

本文链接：https://blog.csdn.net/djk8888/article/details/126163042

版权

该博客演示了如何在HTML中使用Layui库创建带分页功能的表格，并与后台MVC控制器进行交互。通过引入layui.css和layui.js，设置表格配置并定义请求参数，实现了表格数据的动态加载和分页。在MVC端，模拟生成JSON数据响应前端请求。预览显示了表格加载的数据。源码可在指定链接下载。

摘要由CSDN通过智能技术生成

HTML:

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">


<table class="layui-hide" id="test"></table>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'//对应着Table的ID
            , method: 'get'
            , 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>

MVC:

//模拟生成一个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":"男"}]}