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

article/2025/9/18 1:50:21

项目场景: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 //解析数据列表}

http://chatgpt.dhexx.cn/article/qE707wvL.shtml

相关文章

Vue+elementUI实现Table表格分页效果

VueelementUI实现Table表格分页效果 在毕业项目书写时,需要实现分页效果,而查找了大部分资料,大多是静态Table表格的分页,而该项目的数据大多是后台查询后的动态数据,于是我参考了网上的方法,并进行了一系列…

layui 树形表格分页功能

layui目前仅有常规表格分页及树形图,未能有树形图分页功能, 采用另外单独设立分页栏,分页改变时调用方法重载树形树形表格数据。 20230628更 感谢各位的喜欢,因不经常登录,这里贴一下部分代码,以供参考。 后台部分为…

JAVA_树状表格分页(layUI、treeTable.js)

效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了一个简单的demo&am…

关于layui表格分页问题

分页时注意 limitName必须与后端接收时的字段名相同 后端接收时需要注意page>0时需要page-1

vue 实现简单表格分页功能

使用框架实现表格展示和跳转功能&#xff0c;一直不懂原理。所以自己写一个简单的&#xff0c;加深理解。 布局分为2块&#xff0c;上面是表格展示数据&#xff0c;下面是点击按钮跳转。 效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en&q…

element 表格分页选中

需求&#xff1a; 分页表格实现分页选中&#xff0c;编辑时可以进行回显。 实现&#xff1a; 刚开始拿到需求后本来是自己写代码实现分页选中&#xff0c;后来查了文档&#xff0c;发现可以根据element-table中的提供的属性实现&#xff1b;如下图方式实现&#xff1b; //el…

前端表格分页功能

前端表格分页功能 我的设想难点实现效果展示&代码 我的设想 1.一次性将所有数据请求到&#xff0c;然后分成很多部分给前端来显示 &#xff08;优点&#xff1a;一次性请求完成&#xff0c;无需再请求&#xff0c;缺点&#xff1a;可能用户并不需要用到全部的数据段&…

表格 + 分页 +表格上编辑

分装分页表格 分页表格的封装代码截图实现的功能分页咋弄的dataPacket是啥看下图表格编辑咋搞的我其实啥都不想写。。图片贴上就完了↑↑↑你这个东西咋用呀效果展示一下吧---好的 分页表格的封装 想要使用表格&#xff0c;可以&#xff01; 有各种各样的插件。。。 想要使用分…

js分页、表格

js分页代码&#xff1a; //js分页 //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数 var jsPage function(el, count, pageStep, pageNum, fnGo) {this.getLink function(fnGo, index, pageNum, text) {var s <a href"#p i…

使用element-ui实现表格分页

前言 由于项目需要&#xff0c;我使用到了element-ui&#xff0c;当需要使用到表格分页功能的时候&#xff0c;就遇到了一些问题&#xff0c;但通过努力还是解决了&#xff0c;接下来就让我讲一下我对于element-ui中的分页功能的了解&#xff08;因为这次讲的是表格的分页&…

排序算法---快速排序、堆排序、冒泡排序

排序算法 1 快速排序代码实现stdlib库快排 2 堆排序堆排序的基本思想如何构造一个大顶堆排序 3 冒泡排序 1 快速排序 文章原地址&#xff1a;https://blog.csdn.net/morewindows/article/details/6684558 快速排序的平均时间复杂度是0(NlogN)&#xff0c;它采用了一种分治的策…

ARM C语言调用汇编函数 实现冒泡排序

使用冒泡排序将指定数组排序后输出排序函数使用汇编语言编写&#xff0c;C语言调用汇编语言在控制台显示排序前后的结果 一、问题分析二、代码编写2.1 C语言代码2.2 汇编代码 三、ADS调试3.1 运行ADS软件&#xff0c;进入调试界面3.2 汇编函数调试3.3 执行结果 一、问题分析 本…

汇编入门程序,冒泡排序

写了半天发现资料不多&#xff0c;放上来造福一下人类&#xff0c;主要题库的题也好多题解太少 一 用汇编语言编写程序&#xff0c;要求实现以下功能&#xff1a; 程序执行后&#xff0c;屏幕显示提示信息&#xff1a;“Please Enter The Password:”&#xff0c;等待输入用…

汇编语言实现冒泡排序

文章目录 题目简述思路代码总结 题目简述 给定10个数&#xff0c;使用汇编语言&#xff0c;实现10个数的冒泡排序&#xff0c;使之成为升序 思路 本题中&#xff0c;我们需要使用条件转移指令&#xff0c;比较指令&#xff08;CMP&#xff09;&#xff0c;交换指令&#xff…

微机原理实现冒泡排序

微机原理实现冒泡排序 废话不说先放题目 实验目的 1&#xff09; 学会从键盘中读取输入&#xff0c;并将其ASCII码进行转化。 2&#xff09; 利用所学的冒泡排序对数组进行输出 3&#xff09;学会使用中断程序进行字符的输出。 实验所用仪器及使用方法 Windows emu8086仿…

MIPS实现冒泡排序

程序目标 从键盘输入10个无符号字数并从大到小进行排序&#xff0c;排序结果在屏幕上显示出来。 准备工作 编程的入门级知识&#xff1a;循环、冒泡排序、内存和堆栈的概念MIPS语法&#xff1a;程序基本结构汇编语言&#xff1a;不同寄存器作用、数据存储、系统调用编辑器&a…

c语言数组实现冒泡排序

数组实现冒泡排序 什么是冒泡拍排序用数组实现总结 什么是冒泡拍排序 首先&#xff0c;需要了解一下什么是冒泡排序&#xff0c;定义&#xff1a;冒泡排序&#xff08;Bubble Sort&#xff09;也是一种简单直观的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个…

汇编实现排序——冒泡排序

冒泡排序算法的运作如下&#xff1a;&#xff08;从后往前&#xff09; 1.比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。 2.对每一对相邻元素作同样的工作&#xff0c;从开始第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数。…

冒泡排序与qsort排序

先来比较两者的优缺点&#xff1a; 冒泡排序qsort排序优简单&#xff0c;稳定效率高&#xff0c;适用性广劣适用性差&#xff0c;速度慢较为复杂 一、冒泡排序&#xff1a; 底层思路&#xff1a; 如此循环9轮得到 知道了思路就可以写代码了 #include<stdio.h> void bubbl…

易语言冒泡排序

冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成。这个算…