페이지네이션 스킨 두개 만들기

페이지네이션으로 번호를 매겨야 사용자에게 좀 더 가독성이 좋은 UI 화면을 만들수 있다고 한다.

페이지네이션도 트렌드가 있고 또 시대에 따라서 사용자가 중점으로 사용하는 기능별 페이지네이션이 있다.

어떤곳에 초점을 둘지가 애매하다면 구글의 페이지네이션을 따라서 만들면 되지 않을까 생각한다.

스프링에서는 페이지네이션을 따로 모듈화하여 관리한다. 때문에 스프링 설명서를 읽고 페이지네이션을 고칠 수 있다.

전자정부프레임워크를 사용한다면 util에 기본 페이지네이션이 있을것이므로 그곳을 참조하는게 좋을 듯 싶다.

아래의 예제 소스 또한 전자정부의 페이지네이션을 사용하였다.

문제점은 모바일과 PC버전이 화면의 크기가 다르다는 것이다. 모바일의 경우 페이지를 10개를 다 보여주기 힘드니 5개 정도만 보이게 하고 싶은데

페이지네이션을 이미 모듈화해서 하나로 사용하고 있다면 고민이 될 것이다. 때문에 페이지네이션은 원하는 만큼 얼마든지 custom이 가능하다.

전자정부 페이징 커스텀 : http://kimsg.tistory.com/64

dispatcher-servlet.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!-- For Pagination Tag -->     <bean alue-ref="imageRenderer"/>     <bean id="imageRenderer" class="egovframework.example.cmmn.web.ImgPaginationRenderer"/>     <bean id="paginationManager" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationManager">         <property name="rendererType">             <map>                 <entry key="imageOri" value-ref="imageRendererOri"/>                 <entry key="image" value-ref="imageRenderer"/>             </map>         </property>     </bean>      <!-- /For Pagination Tag -->     <bean id="imageRenderer" class="egovframework.example.cmmn.web.ImgPaginationRenderer"/>      <entry key="image" value-ref="imageRenderer"/> Colored by Color Scripter

cs

전자정부프레임워크에서 페이지네이션을 만드는 가장 쉬운 방법은 가져다 쓰는 것이 아닐까.

부트스트랩에서도 페이지네이션을 제공한다.

부트스트랩 : https://www.w3schools.com/bootstrap/bootstrap_pagination.asp

https://www.w3schools.com/bootstrap/bootstrap_pager.asp

CSS도 가이드가 있다 : https://www.w3schools.com/w3css/w3css_pagination.asp