使用Layui和ThinkPHP怎么实现分页_Layui分页对接【教程】-ThinkPHP-PHP中文网

thinkphp后端需手动构造layui分页json格式：code=0、msg为空、count为$total()结果、data为$items()数组；前端laypage需url含?page={{page}}&size={{limit}}，参数名与tp的input('page')/input('size')对齐。

使用layui和thinkphp怎么实现分页_layui分页对接【教程】

ThinkPHP 后端怎么返回 Layui 分页需要的数据格式

Layui 的 laypage 组件不认 ThinkPHP 默认的分页数组结构，直接传 $list->render() 或 $list->toArray() 会丢总数、当前页、总页数等关键字段，前端翻页就失效。

必须手动构造 Layui 要的 JSON 结构，核心字段是：code（固定 0）、msg（可空）、count（总记录数）、data（当前页数据数组）。

用 $list->total() 拿总数，别用 count($list) —— 那只是当前页条数
$list->currentPage() 和 $list->lastPage() 可选，Layui 不强制要，但后端分页逻辑得靠它算偏移量
数据体用 $list->items()，不是 $list->all()，后者可能带元信息干扰渲染

// ThinkPHP 6 示例（控制器中）
$data = [
    'code'  => 0,
    'msg'   => '',
    'count' => $list->total(),
    'data'  => $list->items()
];
return json($data);

Layui 前端 laypage.render() 怎么配参数对接 TP 接口

重点在 url、page、limit 三个参数联动后端。Layui 默认把当前页叫 page，每页条数叫 limit，TP 的分页方法默认接收 page 和 size（不是 limit），不统一就会查错页。

url 必须带问号，比如 '/api/article?page={{page}}&size={{limit}}'，不然 Layui 不自动拼参
limits 数组写成 [10, 20, 50] 就行，别写字符串；改 limit 会触发新请求，TP 要能识别 size
后端若用 input('page/d', 1) 和 input('size/d', 10) 接参，就和前端完全对齐
别漏 jump 回调——页码变化时要重新渲染内容区，否则点页码没反应

// Layui 示例（JS 中）
laypage.render({
  elem: 'page',
  url: '/api/article?page={{page}}&size={{limit}}',
  page: {curr: 1},
  limits: [10, 20, 50],
  jump: function(obj, first) {
    if (!first) {
      // 发起 AJAX，把 obj.curr 和 obj.limit 传过去
      axios.get(obj.url).then(res => {
        $('#list').html(template(res.data.data));
      });
    }
  }
});

为什么 Layui 翻页后数据没变，或报 404 / 500

90% 是前后端参数名或路径没对上，不是代码写错，而是“以为对上了”。

检查浏览器 Network → XHR，点一页，看实际发出的 URL 是什么，对比后端路由是否匹配（比如 TP 路由定义是 api/article，但 JS 写成 /api/articles）
看响应体是不是标准 JSON，有没有 PHP warning 混在里面（常见于开启 debug 后未关闭，输出了 notice 导致 JSON 解析失败）
TP 中用 paginate() 时，如果模型没设置主键或主键名不是 id，total() 可能不准，导致 count 字段比实际小，最后几页空白
Layui 的 elem 是容器 ID，别写成 class 或标签名；且该容器不能是 <table> 直接子元素，否则渲染错位 <h3>ThinkPHP 分页性能差？Layui 加载慢怎么优化</h3> <p>TP 默认用 <code>COUNT(*) 查总数，大表下明显卡顿。Layui 分页本身无缓存，每次翻页都重请求，放大后端压力。
- 总数能预估就别 COUNT：比如后台管理场景，日活用户数稳定，可缓存一个近似值，用 withCount() 替代全表 COUNT
- TP6+ 可用 simplePaginate() 关闭总数查询，但 Layui 需要 count 字段，所以得自己补——比如从 Redis 读缓存总数
- 前端加 loading 效果，用 loading: true 参数，避免用户狂点
- 接口加 ETag 或 Last-Modified，让浏览器缓存历史页（需后端配合，TP 可用 response()->withEtag()）
最常被忽略的是：TP 的分页对象在 JSON 输出前没清理掉内部的 Query 实例引用，导致序列化卡死或内存溢出。务必用 ->items() 和 ->total() 显式取值，别直接 json($list)。

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！