layui table 表格实现分页，后台使用tp5.1DB_tp51 layui table.render 分页-优快云博客

本文链接：https://blog.youkuaiyun.com/myNameIsOwen/article/details/126903311

本文介绍了如何结合layui前端框架和后台PHP的TP5.1 DB组件来实现表格数据的分页显示。通过前端js代码和后台PHP代码的配合，实现了数据的动态加载和分页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段展示效果

在这里插入图片描述

js 代码

table.render({
      elem: '#LAY-app-content-list'
      ,url:'{:url("Bolg/selectList")}'
      ,page: true
      ,cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'id',title: 'ID',sort:true,width :80}
        ,{field: 'title',title: '标题'}
        ,{field: 'upload_time',title: '上传时间',}
        ,{field: 'tags',title: '作者',}
        ,{field: 'tags',title: '分类',}
        // ,{field: 'save_time',title: '更新时间'}
        ,{field: 'state',title: '状态',templet:function(d){
            if(d.state ==1){
              return'已发布';
            }else if (d.state ==0){
              return '未发布';
            }
          }}
        ,{field: 'right',title: '操作',width: 150, minWidth: 150, toolbar: '#table-content-list'}
      ]],
      page: {
        curr: 1 //重新从第 1 页开始
        ,layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
        ,limit:5 //一页显示多少条
        ,limits:[5,10,15,20,25,30]//每页条数的选择项
        ,groups: 5 //只显示 2 个连续页码
        ,first: "首页" //不显示首页
        ,last: "尾页" //不显示尾页
      }

    });

后台PHP代码

public function selectList(){
        $page=request()->param('page');
        $limit=request()->param('limit');
        $where[] = ['state', 'neq', 3];
        $count=count(Db::name('List')->where($where)->select());
        $list=Db::name('List')->where($where)->limit(($page-1)*$limit,$limit)->select();
        return json([
            'data'=>$list,
            'code'=>0,
            'count'=>$count,
        ]);
    }