ThinkPHP5、内容管理系统、前端框架layui、layPage模块

优采云 发布时间: 2022-05-13 12:40

  ThinkPHP5、内容管理系统、前端框架layui、layPage模块

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

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

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

  

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

  

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

  

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

  这只是最基础的使用方法,下面结合实例看一下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的这段代码就不做解释了。

  相关链接:

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线