layui的自定义page

最新推荐文章于 2024-02-22 01:39:38 发布

源码plus

最新推荐文章于 2024-02-22 01:39:38 发布

阅读量3.8k

点赞数 1

分类专栏： layui前端框架的使用 JAVA开发文章标签： layui html javascript

本文链接：https://blog.csdn.net/qq_38310446/article/details/103642765

版权

JAVA开发同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

layui前端框架的使用

5 篇文章 0 订阅

订阅专栏

一：前端页面使用laypage

<div id="demo20" align="center" style="margin-top: 20px;"></div>

  let totalCount = 0;
        getPageData(1, 6);

        function getPageData(page, limit) {
            $.ajax({
                type: "post",
                async: false,
                url: "/product/getProductList?categoryId=${categoryId}",
                data: {
                    page: page,
                    limit: limit
                },
                success: function (data) {
                    console.log(data);
                    totalCount = data.count;//数据总数量
                    //这里渲染页面吧。
                    let innerHtml = "";
                    data.data.forEach((item, index, arr) => {
                        console.log(item);
                        innerHtml += `  <div class="layui-col-xs12 layui-col-sm12 layui-col-md3 zhuyeRightContent">
                    <div class="layui-row" style="padding-left: 20px;height: 200px;">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                            <img src="${"${item.introduceImage}"}" height="150px" width="250px;">
                        </div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                            商品名称：${"${item.productName}"}
                        </div>
                        <div class="layui-col-xs10 layui-col-sm10 layui-col-md9">
                            商品价格:${"${item.price}"}￥
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md3">
                            <a class="toOrder" id="${"${item.id}"}" href="javascript:void(0)">下单</a>
                        </div>
                    </div>
        </div>`;
                        document.getElementById('productIdHtml').innerHTML = innerHtml;

                    });


                }
            });
        }

        /**
         * //执行一个laypage实例
         */
        var currPageNum;
        laypage.render({
            elem: 'demo20' //注意，这里的 test1 是 ID，不用加 # 号
            , count: totalCount //数据总数，从服务端得到
            , limit: 6
            , jump: function (obj, first) {
                currPageNum = obj.curr;
                getPageData(obj.curr, 6);
            }
        });

效果如图：

默认的分页，样式居中如下，laypage居中可使用css居中；text-align:center;

<style>
    .layui-table-page {
        text-align: center;
    }
</style>

二.后端表格使用laypage

第一步：从后台获取第一页表格数据

第二步：渲染表格

第三步：创建laypage实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui2.45/css/layui.css" />
    <script type="text/javascript" src="/layui2.45/layui.js"></script>
    <style>
        .layui-table-page {
            text-align: center;
        }
    </style>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<div id="test1" style="text-align: center"></div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','laypage'], function(){
        var table = layui.table;
        var laypage=layui.laypage;
        var $ = layui.jquery;//引入jquery的模块

        /**渲染表格
         * */
        function renderTable(data) {
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 512
                // ,url: '/getCity3' //数据接口
                // ,page: true //开启分页
                ,toolbar: '#toolbarDemo'
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'},
                    {field: 'name', title: '名称'}
                    ,{field: 'countryCode', title: '城市代码',sort: true}
                    ,{field: 'district', title: 'district'}
                    ,{field: 'population', title: 'population'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]],
                data:data
            });

        }
        /**
         * 从后台获取分页数据
         * @param page
         * @param limit
         */
        var totalCount;
        getTableData(1, 10);

        function getTableData(page, limit) {
            $.ajax(
                {
                    type: "get",
                    async: false,//同步进行。一步一步的来
                    url: "/getCity3",
                    data: {
                        page: page,
                        limit: limit
                    }, success: function (data) {
                        console.log(data);
                        totalCount = data.count;//数据总数量
                        renderTable(data.data);
                    },
                    dataType: "json"
                }
            );
        };

        /**
         * //执行一个laypage实例
         */
        var currPageNum;
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: totalCount //数据总数，从服务端得到
            , jump: function (obj, first) {
                console.log(obj);
                console.log(obj.curr + "当前页");
                currPageNum = obj.curr;
                //obj包含了当前分页的所有参数，比如：
                //首次不执行
                if (!first) {
                    getTableData(obj.curr, 10);
                } else {
                    getTableData(1, 10);
                }
            }
        });



    });

</script>
</body>
</html>

至此：laypage的两个方向的使用完成；

如有不解，请加java爱好群大家交流：852665736；大家一起交流，一同进步；

无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注公众号：gh_817962068649

源码plus

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
layui的自定义page

一：前端页面使用laypage<div id="demo20" align="center" style="margin-top: 20px;"></div> let totalCount = 0; getPageData(1, 6); function getPageData(page, limit) { ...
复制链接

扫一扫