layui实现页码跳转
时间: 2023-06-15 12:05:23 浏览: 158
在 layui 中,可以通过 laypage
组件来实现页码跳转。具体步骤如下:
- 引入 layui 和 jquery 库。
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
- 在页面中添加一个用于显示分页的容器。
<div id="page"></div>
- 在 js 中配置
laypage
组件。
layui.use(['laypage'], function(){
var laypage = layui.laypage;
// 总页数
var pageCount = 10;
laypage.render({
elem: 'page', // 分页容器的id
count: pageCount, // 数据总数
limit: 10, // 每页显示的条数
jump: function(obj, first){
// obj包含了当前分页的所有参数,比如:当前页、总页数、每页显示的条数等
if(!first){
// 非首次加载页面
// 跳转到指定页码
window.location.href = '/page/' + obj.curr;
}
}
});
});
在上述代码中,我们在 jump
函数中判断是否为首次加载页面,如果不是首次,则获取当前页码并跳转到指定页面。
注意:在实际使用中,需要根据实际情况修改代码中的参数。
阅读全文