当然，这里是一个完整的
layui 分页的示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Layui分页示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.6/css/
layui.css">
</head>
<body>
<div id="
demo" style="margin: 20px;"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.js"></script>
<script>
layui.use(['laypage', 'layer'], function(){
var laypage =
layui.laypage
,layer =
layui.layer;
// 模拟数据
var data = [
{'name': '张三', 'age': 18},
{'name': '李四', 'age': 20},
{'name': '王五', 'age': 22},
{'name': '赵六', 'age': 25},
{'name': '钱七', 'age': 28},
{'name': '孙八', 'age': 30},
{'name': '周九', 'age': 32},
{'name': '吴十', 'age': 35},
{'name': '郑十一', 'age': 38},
{'name': '王十二', 'age': 40}
];
// 执行一个laypage实例
laypage.render({
elem: '
demo'
,count: data.length
,limit: 3
,limits: [3, 5, 10]
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj){
// 渲染数据列表
var html = '';
for(var i = (obj.curr - 1) * obj.limit; i < Math.min(obj.curr * obj.limit, data.length); i++){
html += '<li>'+ data[i].name +' - 年龄：'+ data[i].age +'</li>';
}
$('#
demo').html(html);
// 使用setTimeout模拟异步请求数据
setTimeout(function(){
layer.msg('当前页：'+ obj.curr +', 每页显示：'+ obj.limit +', 总页数：'+ obj.pages);
}, 200);
}
});
});
</script>
</body>
</html>
```
这个示例使用了
layui和jQuery库，以及模拟的数据，你可以根据自己的需求进行修改。在页面上创建了一个id为`
demo`的元素，并在脚本中使用`laypage.render`方法初始化
分页组件。
其中的`data`数组是模拟的数据，你可以将它替换为你实际的数据。`jump`回调函数会在
分页切换时触发，你可以在回调函数中根据当前页码和每页显示数量从数据中获取对应的数据进行渲染。
另外，`layout`选项可以自定义
分页组件的布局，比如添加上一页、下一页等按钮。这个示例中的布局包含了页码、上一页、下一页、每页显示数量、刷新和跳页等元素。
希望这个示例对你有帮助！如果有什么不清楚的地方，可以继续提问。
扫一扫
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
