Use LayUI to implement front-end paging function

1. Introduction to LayUI

Layui is a domestic front-end UI framework written using its own module specifications, following the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and you can use it right out of the box. Built-in UI framework with some common elements and components.

The download address is http://www.layui.com/, and you can import it into the project after downloading.

<link>
<script></script>

2. Introduction to LayPage parameters

aypage is a built-in encapsulated object that can be called directly when paging. There are mainly the following parameters here for Configure the key-value pair set of the layout page:

##pagesRequiredNumbercurr##defaultStringControl paging skin1Total page valuePrevious pagenextNextpage

Key	Default value	Type	Description
##cont	Required	String/Object	##Container. The value can be passed in element id or native DOM or jquery object
		##Number of pages
##1	Number	Current page.	##groups
##5	Number	The number of consecutive pages.	##skin
			##first
Number/String/ Boolean	is used to control the home page. first: false, it means not to display the homepage items		last
Number/String/Boolean	is used for control last page. last: false, it means that the last page item is not displayed		prev
##String/Boolean	is used for control One page. If it is not displayed, set false
String/Boolean	用于控制下一页。若不显示，设置false即可
jump	核心参数	Function	触发分页后的回调，函数返回两个参数。  obj是一个object类型。包括了分页的所有配置信息。  first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。

三、分页实现

在前端展示页面，代码如下：

<script>   var pcountString= "${pcount}";   var psizeString= "${psize}";   var pcountInt= parseInt(pcountString);//总页数
   var psizeInt=parseInt(psizeString); //页面大小
   var pindex = "${pindex}";// 当前页
   var ptotalpages=Math.ceil(pcountInt/psizeInt);// 总记录数
   layui.define([&#39;layer&#39;, &#39;laypage&#39; ], function(exports) {       var layer = layui.layer;       var laypage = layui.laypage;       var pcount = pcountInt;// 总记录数
       var psize = psizeInt;// 每一页的记录数
       // 分页       laypage({
           cont : &#39;pagination&#39;, // 页面上的id
           pages : ptotalpages,//总页数
           curr : pindex,//当前页
           skin: &#39;#999999&#39;,//颜色
           jump : function(obj, first) {               if (!first) {                   var parId=$("#parId").val();                   var pindex=obj.curr;
                window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId="+parId+"&pindex="+pindex;//跳转链接               }
           }
       });
   });</script>

分页效果如下：

更多layui知识请关注PHP中文网layui教程栏目

The above is the detailed content of Use LayUI to implement front-end paging function. For more information, please follow other related articles on the PHP Chinese website!