[javascript] 자바스크립트 기반의 pagination 만들기 1편

보통은 페이징 처리는 서버에서 이루어진다. 

하지만 필자는 스크립트에 데이터를 들고 있으면서 페이지 이동 없는 페이징처리가 필요했다.

어쩔 수 없이 자바스크립트로 페이징 처리를 해야겠다.

자바스크립트로 pagination을 적용해보겠다.

우선 결과 부터 보자.

	번호	내용

현재 글은 총 31개이고 한페이지에 보여주는 글 수는 5개, 한 블럭에 보여지는 페이지는 3페이지로 설정해보았다.

이 설정은 다음 포스팅을 통해 원하는대로 변경이 가능하다는 걸 알 수 있다.

테이블의 머릿글에 체크박스와 번호 내용을 넣었다. 

체크 박스를 넣은 이유는 보통 개발하면서 전체 선택을 많이 사용하기 때문에 예시로 넣어 보았다.

(사실 번호와 내용만 보여주기에 너무 비어 보여서 추가했다.)

이 포스트에는 pagination을 위한 포스트 이기 때문에 체크 박스 관련 스크립트는 존재하지 않는다.

또한,  pagination에 중점을 두고자 글의 내용에는 신경쓰지 않았으니 마음씨 넓은 독자분들이 이해해주길 바란다.

설명해보자면, 

처음 시작하면 첫페이지를 보여주기 때문에 숫자 1에 컬러를 주었다.

첫 페이지에 있으면 앞으로 가는 이전 버튼이나 첫페이지로 가는 버튼은 없다.

대신, 다음 블럭으로가는 버튼과 마지막으로 향하는 버튼이 생긴다.

2를 누르게 되면 두번째 페이지로 넘어가면서 첫 페이지로 가는 버튼이 생긴다.

하지만 아직 1블럭에 머물러 있기 때문에 이전 블럭으로 가는 버튼은 존재하지 않는다.

이제 다음 블럭으로 넘어가기 위해 Next를 눌러보자.

그러면 4번째 페이지가 나오면서 앞 뒤에 모든 버튼이 생길 것이다.

당연히 Prev 버튼을 누르면 첫번째 블럭으로 이동하면서 맨 마지막 페이지인 3으로 이동하게 된다.

이제 마지막 페이지로 이동해보자

마지막 페이지는 마지막 블럭임과 동시에 더이상의 페이지가 존재하지 않기 때문에 

Next버튼과 Last 버튼이 사라졌다. 대신 앞으로 이동할 수 있는 버튼들이 생겼다.

여기까지 스크립트 실행 결과였다. 

다음 포스팅에서 스크립트 코드를 보면서 설명하도록 하겠다.