LayUI는 프런트엔드 페이징 기능을 구현합니다.

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

1. LayUI 소개

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

다운로드 후 프로젝트를 소개해주세요.

<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. 페이지 매김 구현페이지를 프런트 엔드에 표시하며, 코드는 다음과 같습니다.

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> 페이지 매김 효과는 다음과 같습니다.	프런트 엔드 페이징에 대한 추천 기사 10개	jQuery 프런트엔드 페이징 예제 Sharing_jquery

위 내용은 LayUI는 프런트엔드 페이징 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!