페이징 bar_javascript 기술의 웹 표준 구현

페이징 바는 웹 페이지에서 가장 일반적인 구성 요소입니다. 이 블로그 게시물은 web2.0 페이징 바의 표준 예를 제공하고 간략하게 분석합니다. 이 페이징 바의 인터페이스 효과는 아래와 같습니다:

이 페이징 바 구성 요소는 다음과 같은 특징을 갖습니다.

1 페이지 표시줄에는 현재 페이지 번호와 관계없이 항상 첫 페이지의 페이지 번호와 마지막 페이지의 페이지 번호가 표시됩니다(위 그림 참조). 이런 방식으로 사용자는 마지막 페이지 번호에서 총 페이지 수를 알 수 있을 뿐만 아니라 마지막 페이지와 첫 페이지 사이를 쉽게 이동할 수 있습니다.

2. 은 표시되는 페이지 번호(생략선은 1로 계산)를 항상 고정합니다(예: 9). 아래 두 그림과 같이 현재 페이지 번호가 1 또는 9(또는 임의의 숫자)인 경우 표시되는 페이지 번호는 9입니다. . 이렇게 하면 Ajax 페이징을 할 때 버튼 위치가 바뀌기 때문에 사용자는 이동할 필요 없이 같은 위치에서 다음 페이지 버튼을 여러 번 클릭할 수 있다. 마우스를 사용하면 사용자 경험이 크게 향상됩니다.

3. 표시되는 페이지 수는 인터페이스 매개변수를 통해 쉽게 설정할 수 있습니다. genPaginationHtml() 인터페이스의 편차(오프셋) 매개변수는 현재 페이지 번호의 왼쪽 또는 오른쪽에 표시되는 페이지 번호 수를 설정하는 데 사용됩니다. 따라서 표시되는 페이지 번호의 총 개수는 2*편차 1과 같습니다. 예를 들어, 이 예에서 편차를 4로 설정하면 총 9개의 페이지가 표시됩니다.

이 예제의 다음 소스 코드를 주석 처리한 후 인터페이스에 주석을 달기 전과 후의 차이점을 비교해 보세요. Google의 페이지 매김 동작을 비교할 수도 있으며 이 예제에서 다음 코드를 주석 처리한 후 해당 동작이 동작임을 알 수 있습니다. 이 예제를 작성하면서 Google의 페이지 매김 동작을 연구한 후 점차적으로 진화하고 확장했습니다.

코드 복사 코드는 다음과 같습니다.

//전체 코드번호를 고정합니다
if ( curPage - startNum < 편차) {
endNum = 편차 - (curPage - startNum);
endNum = endNum > 페이지 수 : endNum - curPage < 편차 ) {
startNum -= 편차 - (endNum - curPage);
startNum = startNum
}; genPaginationHtml(rowsCount , pageSize, curPage, toPage, 편차) 인터페이스 매개변수는 다음과 같이 설명됩니다.
rowsCount(number): 총 레코드 수입니다.
pageSize(number): 각 페이지에 표시되는 레코드 수입니다.
curPage(number): 현재 페이지 번호.

toPage(string): 지정된 페이지로 이동하는 로직을 구현하는 함수 이름입니다.
편차(숫자): 현재 페이지 번호의 왼쪽 또는 오른쪽에 표시되는 페이지 번호의 수입니다.


페이지 표시줄 샘플 다운로드