자바스크립트 페이징 예제

이에 따라 호출기 단추를 활성화 및 비활성화할 수 있도록 응용 프로그램의 페이지 수를 알아야 합니다. 예를 들어 마지막 페이지로 이동하면 다음 및 마지막 단추 등이 자동으로 비활성화됩니다. 이 기능을 로드 기능에 추가할 수 있습니다. 지금까지 는 페이징 할 항목이있는 배열과 다음으로 이동하는 페이지를 결정하는 제어 버튼이 있습니다. 그리고 현재 페이지의 요소를 설정하는 기능이 있습니다. 그건 거의 완전히 작동 페이지 모듈. 하지만, 우리는 조금 더 잘 할 수 있습니다. 각 새 하위 목록이 로드된 후 페이징 단추의 상태(다음, 이전, 첫 번째, 마지막)를 결정합니다. 예를 들어 1페이지에 있는 경우 첫 번째 단추와 이전 단추를 사용하지 않도록 설정해야 합니다. 각 새 페이지 목록이 생성된 후 다음 기능을 실행할 수 있습니다. 예를 들어 nextPage 함수는 다음과 같이 구현됩니다: 페이지 로드시 데이터를 한 번만 가져오는 간단한 클라이언트 측 페이지 페이지 처리 예제입니다. 다음은 복사 / 붙여 넣기 즐거움에 대한 전체 작업 JS 예제입니다. 이것은 아이디어를 설명하는 간단한 예일 뿐이므로 drawList 함수는 페이지리스트 배열의 값을 뱉어 낼 뿐입니다.

이러한 솔루션중 상당수가 작동했지만 제3자 라이브러리에 숨겨져 있었고 제가 거의 통제할 수 없는 특정 조건하에서만 작동했습니다. 그래서 저는 앉아서 직접 구현을 하기로 결정했습니다. 매우 간단한 구현이지만 페이지 가 무엇인지에 대한 기본 을 다룹니다. 그래서 나는 당신의 보기 즐거움을 위해 오늘 여기에 그것을 공유 할 것입니다. 원하는 방식으로 자유롭게 수정할 수 있습니다. 숫자 페이징을 추가하고, 코드 양을 줄이며, 페이지당 여러 호출기를 허용하는 등 목록 변수는 데이터 컬렉션을 저장합니다. 이것은 정말 아무것도 할 수 있습니다. 문자열, 정수, 자바 스크립트 개체입니다. 현재Page 변수는 페이지 페이지에서 위치를 추적합니다. numberPerPage는 페이지당 표시할 항목의 양을 지정합니다.

pageList 는 현재 페이지에 표시할 항목을 추적하기 때문에 스크립트에서 매우 중요한 역할을 합니다. 별도로 저장할 필요는 없지만 데이터에 따라 프로세스가 더 쉬워질 수 있으며 예를 들어 프로세스를 더 쉽게 따를 수 있습니다. NumberOfPages는 로드시 계산되며 컬렉션을 렌더링하는 데 필요한 총 페이지 수를 알려줍니다. 이것은 숫자 매포지토리를 수행 하려는 경우에 정말 필요. 자바 스크립트에 비교적 새로운 경우, 나는 좋은 출발점으로 HTML, CSS, 자바 스크립트 및 jQuery와 웹 디자인을 권장합니다. 스크롤 가능한 요소는 모든 유형, 크기 또는 깊이의 콘텐츠를 수용할 수 있습니다. 페이징 또는 사용자가 스크롤해야 하는 간단한 항목 목록에 사용합니다.