Thinkphp+layui数据表格实现表格分页

最新推荐文章于 2024-06-06 18:37:58 发布

thwolf

最新推荐文章于 2024-06-06 18:37:58 发布

阅读量1.1k

点赞数 1

文章标签： layui php 数据库

本文链接：https://blog.csdn.net/thwolf/article/details/124692240

版权

本文档介绍了在Thinkphp框架下，结合Layui数据表格进行分页显示时遇到的问题及解决方案。问题在于layui无法正确读取后台返回的分页数据，原因是返回的数据结构与layui期待的不符。解决方案是通过在后台保持原有的分页逻辑，同时在layui的前端部分使用`parseData`回调函数来解析后台返回的多维数组数据，确保`data`参数对应正确的数据列表。

摘要由CSDN通过智能技术生成

项目场景：Thinkphp+layui数据表格实现表格分页

提示：thinkphp+layui数据表格分页，需要服务器端配合。之前在百度上一通乱搜也没找到解决方案。
在这里插入图片描述

问题描述

提示：这里描述项目中遇到的问题：

之前一看layui的文档一只以为在page里面设置参数就可以，其中limit的值是每页显示多少条，limits是的值是下拉框选择每页显示条数，例如显示20 50 100等等。经过反复设置，表格依然是读取了所有数据。

     ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
        //,curr: 5 //设定初始在第 5 页
        ,limit:20 //一页显示多少条
        ,limits:[20,50,100]//每页条数的选择项
        ,groups: 5 //只显示 2 个连续页码
        ,first: "首页" //不显示首页
        ,last: "尾页" //不显示尾页
      }

解决方案：

提示：在后台分页，利用 parseData 回调函数读取数据

在后台分页后，发现layui不能正确读取数据，获得的数据如下：

后端分页代码

	public function pgdata()
	{
		$database = new pingguModel();
		$data = $database->paginate(10);//Thinkphp分页函数，每页10条数据
		$count = count($data);
		$list["msg"] = "";
		$list["code"] = 0;
		$list["count"] = $count;
		$list["data"] = $data;
		return json($list);//返回json
	}

json数据

{"msg":"","code":0,"count":10,"data":{"total":401,"per_page":10,"current_page":1,"last_page":41,"data":
[{"id":1,"run_id":8130,"run_name":"详细信息显示项目-","begin_user":"181","begin_time":"2019-09-18 
10:49:18","flow_auto_num":0,"flow_auto_num_year":0,"flow_auto_num_month":0,"data_m6969":"《2019年
详细信息显示项目-","data_m6970":"","data_m6971":"","data_m6972":"崔晶红,","data_m6974":"ZX-2019-
FP-ZC-027","data_m6975":"","data_m6977":"","data_m6978":null,"data_m6979":"详细信息显示项目-
",,"data_m6982":"","data_m6983":"已登
记","data_m6984":"曹艺伦","data_m6985":"合同","data_m6986":"ZX-2019-FP-ZC-

阅读数据后发现，返回的是个多维数组，layui表格中的data参数对应的键值就不对了，所以获取不到数据。于是调整如下:
后端分页代码无需调整
调整layui的js部分,增加如下代码，读取多维数组数据，回头刷新吧，分页了。

      ,parseData: function(res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.data //解析数据列表
        }