<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实例
<!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