layui分页怎么获取当前页码curr的值

胖宇姑娘_2797

胖宇姑娘_2797

2026-08-11

981人浏览

原创

初始化时curr值只能在jump回调中获取,首次渲染时first为true,此时obj.curr即初始页码;未传curr参数时默认为1,但不可直接从配置读取。

layui分页怎么获取当前页码curr的值

layui分页初始化时怎么拿到 curr 值

layui 的 laypage.render() 默认不主动暴露当前页码,curr 是内部状态,不能直接从配置对象里读取。你得靠它回调里的参数,或者手动维护一个变量。

常见错误是写成 laypage.config.curr 或试图从 options 里取 —— 这些都不存在,会 undefined。

  • 初始化时如果没传 curr,默认是 1,但这个值只在渲染时用,不存为可访问属性
  • 必须在 jump 回调里获取:第一个参数 obj 有 curr 字段,第二个参数 first 表示是否首次渲染
  • 首次渲染时 first 为 true,这时你可以把 obj.curr 存到全局或闭包变量里,后续翻页就靠它
laypage.render({
  elem: 'demo',
  count: 100,
  jump: function(obj, first) {
    // obj.curr 就是当前页码
    console.log('当前页:', obj.curr);
    if (first) {
      // 首次渲染,可保存初始页码
      currentPage = obj.curr;
    }
  }
});

跳转后怎么实时更新 curr 并用于接口请求

很多人把 curr 当成静态配置项,以为改了配置就能“跳到某页”,其实不行 —— layui 分页的跳转必须走 laypage.jump() 方法,否则 DOM 更新了但 jump 回调不触发,curr 状态就断了。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • laypage.jump(elemId, {curr: 5}) 才能真正触发跳转并执行 jump 回调,obj.curr 就是 5
  • 别直接操作 laypage 的 DOM 元素去模拟点击,那样不会触发回调,curr 拿不到
  • 接口请求务必放在 jump 回调里,而不是按钮 click 里 —— 否则可能拿到旧的 curr 值
// ✅ 正确:用 laypage.jump 触发并获取新 curr
document.getElementById('goBtn').onclick = function() {
  laypage.jump('demo', {curr: 3});
};
// ✅ 在 jump 回调里发请求
jump: function(obj) {
  $.get('/api/list?page=' + obj.curr + '&limit=' + obj.limit, function(res) {
    // 渲染数据...
  });
}

为什么有时候 curr 总是 1?

最常踩的坑是:页面加载后手动调了 laypage.render(),但没传 curr,又没在 jump 里处理首次渲染,结果所有翻页行为都从第 1 页开始。

  • URL 带参如 ?page=3 时,必须手动解析并传给 curr 配置项,layui 不自动读 URL
  • 服务端返回总条数 count 为 0 或 null 时,laypage 会重置 curr 为 1,且不报错
  • 多次调用 render() 而没销毁(用 laypage.destroy(id)),旧实例残留可能导致 curr 错乱

自定义页码输入跳转时 curr 怎么同步

layui 自带的「跳转」输入框只负责 UI,不自动绑定事件,curr 不会因此更新 —— 你得自己监听回车或按钮,再调 laypage.jump()。

  • 输入框值要校验:非数字、超出范围(比如 > totalPage)都要拦截,否则 jump 会静默失败
  • 跳转前最好先 laypage.render() 一次确保实例存在,或用 laypage.getPagination(elemId)(需 layui 2.8+)查实例状态
  • 别用 parseInt(input.value) 直接跳,要结合 Math.min() 和 Math.max() 限制范围
document.getElementById('jumpInput').onkeydown = function(e) {
  if (e.key === 'Enter') {
    let val = parseInt(this.value) || 1;
    let totalPage = Math.ceil(100 / 10); // 假设每页10条,共100条
    val = Math.max(1, Math.min(val, totalPage));
    laypage.jump('demo', {curr: val});
  }
};
layui 的 curr 不是属性,是上下文快照;它只活在 jump 回调那一瞬间。想长期持有,就得你自己存;想驱动跳转,就得用 laypage.jump();想避免错乱,就得管好初始化、销毁和边界校验。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2563

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5563

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6570

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6218

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

883

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2920

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2753

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.2万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习