当前位置: 首页 > article >正文

thinkphp8+layui分页

前端

<!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>

后端:

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]);
    }


http://www.kler.cn/a/442447.html

相关文章:

  • Subprocess check_output returned non-zero exit status 1
  • centos使用dpdk库
  • 【Python基础篇】——第3篇:从入门到精通:掌握Python数据类型与数据结构
  • 我要成为算法高手-DFS篇
  • 26_Redis RDB持久化
  • 鸿蒙UI开发——键盘弹出避让模式设置
  • 详细解读BSCI验厂
  • Halcon中histo_2dim(Operator)算子原理及应用详解
  • jmeter怎么调用python
  • 【CSS】实现tag选中对钩样式
  • 数字经济下的 AR 眼镜
  • 聚观早报 | 小米汽车加速出海;越南关闭2G服务
  • 车辆 CSMS 网络安全解析
  • CSS 进阶教程:从定位到动画与布局
  • sql 批量修改字段 的默认值
  • 算法-字典树
  • 配置 wsl 2 网络代理时的认知误区
  • ubuntu 下的sqlite3
  • 4、基于SpringBoot网页时装购物系统
  • linux - 软硬链接
  • 小程序-基于java+SSM+Vue的模拟考试管理系统设计与实现
  • 青少年编程与数学 02-004 Go语言Web编程 01课题、Web应用程序
  • 5分钟掌握nodejs所有功能使用
  • 【UE5】pmx导入UE5,套动作。(防止“气球人”现象。
  • 【信息系统项目管理师-论文真题】2017上半年论文详解(包括解题思路和写作要点)
  • 二、windows环境下vscode使用wsl教程