Laravel 数据分页

桃扇骨 2023-06-22 14:56 5阅读 0赞

二、数据分页  
在laravel里面要完成分页是很简单的，它的思想之前的框架有些不一样，之前框架使用的是分页类完成分页，laravel是直接调用模型的分页方法，返回对应的数据和分页的字符串。  
分页类的在框架中的位置（了解）:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70]

案例：使用分页功能实现当前member数据表的分页效果。由于数据量较少，可以考虑每页显示1个记录，重点是分页的效果

回忆/问题：分页效果的实现大致需要哪几个步骤才能实现？
    	a. 查询符合分页条件的总的记录数
    b. 计算总的页数（总记录数/每页记录数，并且向上取整）
    c. 拼凑分页的链接
    d. （核心）使用limit语法来限制分页的记录数
    e. 展示分页的页码和分页数据
    f. 如果可以，建议去考虑下分页的样式显示问题

①创建路由，并且展示简易列表页面（table标签布局）  
路由：  
![在这里插入图片描述][20191212212822466.png]

创建列表文件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 1]  
②编写控制器中的方法代码，实现没有分页的效果（先不考虑分页效果）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 2]  
③展示数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 3]

无分页展示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 4]

④【案例】使用分页展示上述的页面  
要求：每页显示一条记录。  
在laravel中分页有2个提供者：DB查询构建器，另外可以使用模型来实现。  
用法基本一致。  
以模型为例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 5]  
分页的基本语法：  
Model::paginate(每页显示的记录数) 同样，paginate和get一样，支持使用where以及orderBy等辅助查询的方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 6]

不展示分页链接的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 7]

在页面中展示分页链接：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 8]

语法：\{ \{$保存数据的对象 -> links()\}\}生成的链接

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 9]

目前显示效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 10]

⑤【可选】将页面的提示“>>”和“<<”改成上一页和下一页提示文字  
直接改源码文件：

![在这里插入图片描述][20191212213214896.png]

改为提示文字：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 12]  
在这里插入图片描述

注意：可以使用simplePaginate()表示简单分页，只有上一页和下一页，没有分页字符串。  
例如：$info = Member::orderby(‘age’,‘desc’)->simplePaginate(2);  
附：分页数据对象的其他实用方法如下

分页数据对象->count()        			//当前页数据条数
    分页数据对象->currentPage()  		//当前页码
    分页数据对象->firstItem()    			//当前页第一条数据的序号
    分页数据对象->hasMorePages() 		//是否有后续页码
    分页数据对象->lastItem()     			//当前页最后一条数据的序号
    分页数据对象->lastPage() 				//最后页序号
    分页数据对象->nextPageUrl()  		//下一页的链接地址
    分页数据对象->perPage()      			//每页显示数据条数
    分页数据对象->previousPageUrl()  	//上一页的链接地址
    分页数据对象->total() 					//记录总条数
    分页数据对象->url(5)         			//制作指定页码的链接地址

将页码稍作处理，写的好看点：

样式代码可以百度上寻找：https://www.cnblogs.com/lamp01/p/6869762.html  
将css代码引入到当前的分页页面，最终显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212212732713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[20191212212822466.png]: https://img-blog.csdnimg.cn/20191212212822466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191212212830691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191212212908791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019121221293428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019121221294453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191212213015324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191212213029537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191212213043138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191212213111684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191212213138182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191212213154689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[20191212213214896.png]: https://img-blog.csdnimg.cn/20191212213214896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191212213258571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191212213303297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191212213354603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE5MDg5Mw==,size_16,color_FFFFFF,t_70