首頁  >  文章  >  web前端  >  使用LayUI實現前端分頁功能

使用LayUI實現前端分頁功能

尚
轉載
2020-06-17 16:49:164104瀏覽

使用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實現前端分頁功能

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

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

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除