使用LayUI實現前端分頁功能

一、LayUI介紹

Layui 是一款採用自身模組規範編寫的國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。內建了一些常用元素和元件的UI框架。

下載網址為http://www.layui.com/，下載後引進專案中。

<link>
<script></script>

二、LayPage參數介紹

aypage是內建封裝好的一個對象，在進行分頁的時候直接呼叫即可，這裡主要有以下幾個參數，用於配置laypage的鍵值對集合：

#cont必填String/Object容器。值可以傳入元素id或原生DOM或jquery物件#pages

	#預設值	#類型	描述
	#必填	Number	分頁數
curr	#1	##Number	目前頁。
groups	5	Number	# 連續分頁數。
skin		##default
	String	#控制分頁皮膚	first
1	Number/String/ Boolean	用於控制首頁。 first: false，則表示不顯示首頁項目	last
	## ###總頁數值##################Number/String/Boolean##################用於控制尾頁。 last: false，則表示不顯示尾頁項目########################prev############# ####上一頁##################String/Boolean##################用於控制上一頁。若不顯示，設定false即可#########################next################# #下一頁######	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教程栏目

以上是使用LayUI實現前端分頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！