layui的自定义page

一：前端页面使用laypage

  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 += `  

                    

                        

                            
                        
                        

                            商品名称：${"${item.productName}"}
                        
                        

                            商品价格:${"${item.price}"}￥
                        
                        

                            下单
                        
                    
        
`;
                        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;

二.后端表格使用laypage

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

第二步：渲染表格

第三步：创建laypage实例

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

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

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