>웹 프론트엔드 >JS 튜토리얼 >캡슐화된 JavaScript 프런트 엔드 페이징 플러그인 pagination_javascript 기술

캡슐화된 JavaScript 프런트 엔드 페이징 플러그인 pagination_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:22:172366검색

요약:
최근에는 개발 프로젝트에서 프런트 엔드 페이징이 사용되었습니다. 향후 사용의 편의를 위해 타사 플러그인으로 패키지되어 있으며 어떤 라이브러리에도 의존하지 않습니다. 인터넷에는 이미 많은 플러그인이 있는데 왜 우리가 직접 바퀴를 재발명해야 합니까?

직접 작성했으며 확장성이 뛰어납니다
어떤 라이브러리에도 의존하지 않습니다
기술적 강수로

먼저 렌더링을 살펴보겠습니다

설치방법

먼저 페이지에 CSS와 js를 로드하세요

사용예

페이지 매김({
현재: 1, // 현재 페이지 번호
전체: 6, // 총 페이지 수
Len: 5, // 표시할 페이지 수
targetId: 'pagination', // 페이지 매김 요소 바인딩
​ 콜백: function() { ​
                // 콜백 함수                                }  
})

매개변수 소개

현재

현재 페이지 번호, 각 호출은 현재 페이징을 전달합니다.

합계

전체 페이지 수와 각 페이지에 표시되는 수를 기준으로 총 페이지 수를 구할 수 있습니다

페이징바에 표시되는 수량

대상 ID

페이지 요소 바인딩

콜백

이벤트 바인딩 등 페이지 렌더링이 완료된 후 실행되는 기능입니다.

데모에서는 정적 데이터를 사용합니다. 서버 측 데이터를 호출하는 경우 index.js 파일의 for 루프만 Ajax 요청으로 변경하면 됩니다.

다운로드

http://xiazai.jb51.net/201601/yuanma/pagination-master(jb51.net).zip

데모

http://demo.jb51.net/js/2016/pagination-master/

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