thinkphp8+layui分页

前端

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
  <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
  <tr>
    <th>ID</th>
    <th>realname</th>
    <th>gender</th>
  </tr>
  </thead>
  <tbody>
  {volist name="data" id="vo"}
  <tr>
    <td>{$vo.id}</td>
    <td>{$vo.realname}</td>
    <td>{$vo.sex}</td>
  </tr>
  {/volist}
  </tbody>
</table>
<div id="demo-laypage-all"></div>
<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
<script>
  layui.use(function(){
    const laypage = layui.laypage;
    // 完整显示
    laypage.render({
      elem: 'demo-laypage-all', // 元素 id
      theme: '#1E9FFF',
      count: 100, // 数据总数
      curr:{$page},
      layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
      jump: function(obj, first){
        console.log(obj);
        if(!first){
          window.location.href='?page='+obj.curr;
        }
      }
    });
  });
</script>
</body>
</html>

后端:

php 复制代码
public function index()
    {
        $page = input('get.page/d'); // 当前页码
        $result = Db::name('user')->paginate([
            'list_rows'=> 10,
            'page' => $page
        ]);
        return view('/index',['data'=>$result,'page'=>$page]);
    }
相关推荐
wulijuan888666几秒前
Vue 组件的通信方式有哪些?
前端·javascript·vue.js
k09332 分钟前
vue中view-design的校验及各种坑
前端·vue.js·view design
乘风gg8 分钟前
企业级 Prompt 工程实战指南(下):构建可复用 Prompt 架构平台
前端·面试·架构
宇擎智脑科技21 分钟前
AntV G6、X6 与 React Flow 深度对比:核心差异与大模型时代的应用场景分析
前端·人工智能·react.js·前端框架
山核桃&17°22 分钟前
基于 Vue + Node.js 批处理bat脚本实现多环境一键部署
运维·前端·自动化
AC赳赳老秦22 分钟前
云原生AI趋势:DeepSeek与云3.0架构协同,提升AI部署性能与可移植性
大数据·前端·人工智能·算法·云原生·架构·deepseek
程序哥聊面试28 分钟前
React + TS 初始化新项目报错解决方法
前端·react.js·npm
codeGoogle30 分钟前
2026 年 IM 怎么选?聊聊 4 家主流即时通讯方案的差异
android·前端·后端
C澒36 分钟前
从单体到分布式:SLDS 2.0 全球物流履约网络架构演进之路
前端·分布式·架构·系统架构·教育电商·交通物流
We་ct39 分钟前
LeetCode 21. 合并两个有序链表:两种经典解法详解
前端·算法·leetcode·链表·typescript