LayUI를 사용하여 프런트엔드 페이징 기능 구현-레이이 튜토리얼-php.cn

LayUI를 사용하여 프런트엔드 페이징 기능 구현

尚

풀어 주다： 2020-06-17 16:49:16

앞으로

4143명이 탐색했습니다.

1. LayUI 소개

Layui는 자체 모듈 사양으로 작성된 국내 프론트 엔드 UI 프레임워크로 네이티브 HTML/CSS/JS의 작성 및 구성 형식을 따릅니다. 즉시 사용됩니다. 몇 가지 공통 요소와 구성 요소가 포함된 내장 UI 프레임워크입니다.

다운로드 주소는 http://www.layui.com/이며, 다운로드 후 프로젝트에 import 하세요.

<link>
<script></script>

로그인 후 복사

2. LayPage 매개변수 소개

aypage는 페이징 시 직접 호출할 수 있는 내장형 캡슐화 객체입니다. 여기에는 주로 다음과 같은 매개변수가 있으며, 이는 Laypage의 키-값 쌍 집합을 구성하는 데 사용됩니다. :

키	기본	유형	Description
cont	필수	문자열/객체	컨테이너. 값은 요소 ID 또는 기본 DOM 또는 jquery 객체로 전달될 수 있습니다. 페이지 수
curr	1	Number	현재 페이지.
groups	5	Number	연속 페이지 수입니다.
skin	default	String	페이지 매김 스킨 제어
먼저	1	Number/String/Boolean	은 홈페이지를 제어하는 데 사용됩니다. first: false, 홈페이지 항목을 표시하지 않는다는 의미
last	총 페이지 값	숫자/문자열/부울	제어하는 데 사용됩니다. 마지막 페이지 . 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를 사용하여 프런트엔드 페이징 기능 구현