在基于ThinkPHP5的内容管理系统中，使用UI框架layui实现分页

suiw9 2024-11-06 20:22 27 浏览 0 评论

本文主要是在基于ThinkPHP5的内容管理系统中用前端框架layui的layPage模块实现分页。关于前端框架layui，不多介绍，可参考文章《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》。

layui的分页模块laypage，提供了比较完善的分页逻辑，既能够作为异步分页，又可以作为页面刷新式的分页。使用起来非常简单：

第一步，在HTML页面中需要展现分页的位置，增加一个div作为存放分页的容器。比如：

<div id="pages"></div>

第二步、加载laypage模块。如果部署layui框架时，采用的是模块化部署，需要通过layui.use('laypage')，实现laypage模块的加载；

如果采用的是非模块化部署，直接定义var laypage=layui.laypage即可。

第三步，在javascript代码块中，通过服务端获取的一些初始化值，完成分页的渲染：

laypage.render({
 elem: 'pages',
 count: 50
});
</script>

这只是最基础的使用方法，下面结合实例看一下layui框架的分页模块是如何发挥作用的。首先看一下基于thinkphp5+前端框架layui首先的文章管理功能：

本例中，使用laypage实现分页功能的相关js代码如下：

其中，我从服务器获取了三个数值，limit、count、page，分别为当前页面大小，即每页显示的条数；count，总记录数；page，当前页码。因为我要实现可以选择每页展示条数，所需limit必须从服务器获取，另外当前页面如果不给定，页码展示会有问题。

分页切换功能实现，最主要的是obj和first两个参数，obj包含了当前分页的所有参数，比如：obj.curr:当前页，以便向服务端请求对应页的数据；obj.limit:每页显示的条数。first代表是否是首次，用于初始加载的判断。

其中，layout为自定义排版，根据layui官方文档，可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、skip（快捷跳页区域）。

本例中，关于分页的后台处理程序thinkphp5的代码为：

关于thinkphp5的这段分页查询的代码就不做解释了。

相关推荐