layui的分页模块laypage,供应了比较完善的分页逻辑,既能够作为异步分页,又可以作为页面刷新式的分页。利用起来非常大略:
第一步,在HTML页面中须要展现分页的位置,增加一个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的这段分页查询的代码就不做阐明了。