LayUI의 Front-End Paging 기능 구현 방법 공유
- 小云云원래의
- 2017-12-31 16:20:053482검색
이 글에서는 주로 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의 키-값 쌍 집합을 구성하는 데 사용됩니다.
Key |
기본값 |
Type |
Description |
cont |
필수 |
문자열/객체 |
컨테이너. 값은 요소 ID 또는 기본 DOM 또는 jquery 객체로 전달될 수 있습니다. |
| Number | 현재 페이지. | groups |
|
| Number | 연속 페이지 수입니다. | skin |
|
| String | 페이지 매김 스킨 제어 | first |
|
| 숫자/문자열/부울 | 사용 홈페이지를 제어합니다. first: false, 홈 페이지 항목을 표시하지 않는다는 의미 | last |
|
| Number/String/Boolean | 을 사용하여 마지막 페이지를 제어합니다. last: false, 이는 마지막 페이지 항목 | prev |
|
| String/Boolean | 을 사용하여 이전 페이지를 제어한다는 의미입니다. 표시되지 않으면 | next |
|
| String/Boolean | 을 사용하여 다음 페이지를 제어합니다. 표시되지 않으면 false로 설정하세요. | jump |
|
| Function | 은 페이징 후 콜백을 트리거하고 함수는 두 개의 매개변수를 반환합니다. | obj는 객체 유형입니다. 페이징에 대한 모든 구성 정보를 포함합니다. 먼저 페이지가 처음 로드되었는지 여부를 감지하는 부울 클래스입니다. 무한 새로고침을 방지하는 데 매우 유용합니다. |
3. 페이징 구현 |
<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 아이디어 로컬 데이터 필터링 및 페이징 기능 구현 |
|
위 내용은 LayUI의 Front-End Paging 기능 구현 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!