>  기사  >  웹 프론트엔드  >  LayUI의 Front-End Paging 기능 구현 방법 공유

LayUI의 Front-End Paging 기능 구현 방법 공유

小云云
小云云원래의
2017-12-31 16:20:053509검색

이 글에서는 주로 LayUI를 기반으로 프론트엔드 페이징 기능을 구현하는 방법을 소개합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. LayUI 소개

Layui는 자체 모듈 사양으로 작성된 국내 프론트엔드 UI 프레임워크로, 네이티브 HTML/CSS/JS의 작성 및 구성 형식을 따르며 임계값이 매우 낮습니다. 상자의. 몇 가지 공통 요소와 구성 요소가 포함된 내장 UI 프레임워크입니다.

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

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="external nofollow" >
<script src="${pageContext.request.contextPath}/js/layui.js" ></script>

2. LayPage 매개변수 소개

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

1 Number현재 페이지. 5Number연속 페이지 수입니다. defaultString페이지 매김 스킨 제어1숫자/문자열/부울사용 홈페이지를 제어합니다. first: false, 홈 페이지 항목을 표시하지 않는다는 의미총 페이지 값Number/String/Boolean을 사용하여 마지막 페이지를 제어합니다. last: false, 이는 마지막 페이지 항목 이전 페이지String/Boolean을 사용하여 이전 페이지를 제어한다는 의미입니다. 표시되지 않으면 Next pageString/Boolean을 사용하여 다음 페이지를 제어합니다. 표시되지 않으면 false로 설정하세요. 핵심 매개변수 Function은 페이징 후 콜백을 트리거하고 함수는 두 개의 매개변수를 반환합니다. 3. 페이징 구현 페이지를 프런트 엔드에 표시하며 코드는 다음과 같습니다. thinkPHP5는laypage 페이징 플러그인을 사용하여 목록 페이징 기능을 구현합니다_php 예제

Key

기본값

Type

Description

cont

필수

문자열/객체

컨테이너. 값은 요소 ID 또는 기본 DOM 또는 jquery 객체로 전달될 수 있습니다.

groups

skin

first

last

prev

next

jump

obj는 객체 유형입니다. 페이징에 대한 모든 구성 정보를 포함합니다.

먼저 페이지가 처음 로드되었는지 여부를 감지하는 부울 클래스입니다. 무한 새로고침을 방지하는 데 매우 유용합니다.

<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>

페이지 매김 효과는 다음과 같습니다.

관련 권장 사항:

vuejs 아이디어 로컬 데이터 필터링 및 페이징 기능 구현


PHP를 사용하여 목록 페이징 기능을 구현하는 방법

위 내용은 LayUI의 Front-End Paging 기능 구현 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.