pagination으로 twbsPagination을 사용하고 있는데요. Redraw 하는 방법을 정리해보려고요. 

 

twbsPagination github : https://github.com/josecebe/twbs-pagination

 

Redraw는 아래와 같은 프로세스로 이루어집니다.

  • pagination create
  • pagination destroy
  • pagination html create
  • pagination recreate

 

먼저 pagination이 생성되어 있겠죠. html + javascript 로 말이에요.

<div id='pagination_parent'>
    <div class='pagination'></div>
</div>

<script>
$('.pagination').twbsPagination({
                    totalPages: 100,
                    visiblePages: 10,
                    startPage: 1,
                    initiateStartPageClick: false,
                    onPageClick: function(event, page) {
                        window.location.href = '/aaa/' + page;
                    }
});
</script>

 

잘 사용하다가 pagination을 다시 그리고 싶을 때 먼저 destroy하고 html을 다시 추가해줘야 합니다. <div class='pagination'></div> 요거를 <div id='pagination_parent'>안에 다시 생성해줘야 해요. destrory 할 때 이것도 삭제되버리거든요. 그리고 다시 pagination을 javascript 코드로 생성해줍니다. 

 

<script>

//destroy
$('.pagination').twbsPagination('destroy');


//pagination html create
document.getElementById('pagination_parent').innerHTML ="<div class='pagination'></div>";


//pagination recreate
$('.pagination').twbsPagination({
                    totalPages: 100,
                    visiblePages: 10,
                    startPage: 1,
                    initiateStartPageClick: false,
                    onPageClick: function(event, page) {
                        window.location.href = '/aaa/' + page;
                    }
});
</script>
 

twbsPagination reDraw 정리 완료 !!

 
 

 

 

+ Recent posts