Realman's World

[javascript] Bootstrap을 이용한 pagination 본문

Kairos/Item

[javascript] Bootstrap을 이용한 pagination

리얼맨 2015. 9. 9. 13:27

express로 홈페이지를 만들면서 서버실 출입로그를 보여주는 화면을 만들게 되었다.

로그가 많아지니 한페이지에 보여주는 것이 좋지 않아 게시판처럼 pagination을 할려고 하니 귀찮은 것들이 많았다.

그리하여 구글링 끝에 Bootstrap을 이용한 pagination 모듈을 찾게 되었다.


1. jquery를 아래와 같이 추가한다.


$('#pagination-demo').twbsPagination({

    totalPages: 35,  // 전체 page 수

    visiblePages: 5,  // 출력될 page 수

    onPageClick: function (event, page) {

         $('#page-content').text('Page ' + page);

}

});


2. html code를 아래와 같이 추가한다.


<ul id="pagination-demo" class="pagination-sm"></ul>


3. pagination 의 중앙 배치를 위해서는 아래와 같이 하면 된다.


<div class-"text-center">

<ul id="pagination-demo" class="pagination-sm"></ul>

</div>


참조 : http://esimakin.github.io/twbs-pagination/

Comments