LayUI如何實(shí)現(xiàn)前端分頁(yè)功能

這篇文章主要為大家展示了“LayUI如何實(shí)現(xiàn)前端分頁(yè)功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“LayUI如何實(shí)現(xiàn)前端分頁(yè)功能”這篇文章吧。

一、LayUI介紹

Layui 是一款采用自身模塊規(guī)范編寫(xiě)的國(guó)產(chǎn)前端UI框架，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。內(nèi)置了一些常用元素和組件的UI框架。

下載地址為http://www.layui.com/，下載后引入項(xiàng)目中。

<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參數(shù)介紹

laypage是內(nèi)置封裝好的一個(gè)對(duì)象，在進(jìn)行分頁(yè)的時(shí)候直接調(diào)用即可，這里主要有以下幾個(gè)參數(shù)，用于配置laypage的鍵值對(duì)集合：

三、分頁(yè)實(shí)現(xiàn)

在前端展示頁(yè)面，代碼如下：

<script>
 var pcountString= "${pcount}";
 var psizeString= "${psize}";
 var pcountInt= parseInt(pcountString);//總頁(yè)數(shù)
 var psizeInt=parseInt(psizeString); //頁(yè)面大小
 var pindex = "${pindex}";// 當(dāng)前頁(yè)
 var ptotalpages=Math.ceil(pcountInt/psizeInt);// 總記錄數(shù)
 layui.define(['layer', 'laypage' ], function(exports) {
  var layer = layui.layer;
  var laypage = layui.laypage;
  var pcount = pcountInt;// 總記錄數(shù)
  var psize = psizeInt;// 每一頁(yè)的記錄數(shù)
  // 分頁(yè)
  laypage({
   cont : 'pagination', // 頁(yè)面上的id
   pages : ptotalpages,//總頁(yè)數(shù)
   curr : pindex,//當(dāng)前頁(yè)
   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;//跳轉(zhuǎn)鏈接
    }
   }
  });
 });
</script>

分頁(yè)效果如下：　　

以上是“LayUI如何實(shí)現(xiàn)前端分頁(yè)功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！