一、LayUI介紹
Layui 是一款采用自身模塊規范編寫的國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。內置了一些常用元素和組件的UI框架。
下載地址為http://www.layui.com/，下載後引入項目中。
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="external nofollow" >
<script src="${pageContext.request.contextPath}/js/layui.js" ></script>
二、LayPage參數介紹
laypage是內置封裝好的一個對象，在進行分頁的時候直接調用即可，這裡主要有以下幾個參數，用於配置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(['layer', 'laypage' ], function(exports) {
var layer = layui.layer;
var laypage = layui.laypage;
var pcount = pcountInt;// 總記錄數
var psize = psizeInt;// 每一頁的記錄數
// 分頁
laypage({
cont : 'pagination', // 頁面上的id
pages : ptotalpages,//總頁數
curr : pindex,//當前頁
skin: '#999999',//顏色
jump : function(obj, first) {
if (!first) {
var parId=$("#parId").val();
var pindex=obj.curr;
window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId=" rel="external nofollow" +parId+"&pindex="+pindex;//跳轉鏈接
}
}
});
});
</script>
分頁效果如下：
以上這篇基於LayUI實現前端分頁功能的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。