twbspagination ajax & totalPages 변경 방법 - 삽질중인 개발자

twbspaigination ajax & totalPages 변경 방법

 

twbspagination 을 이용하여 동적으로 총 페이지 수를 변경하면서 페이지네이션을 하려고 하면 onpageclick이 1회 호출되어 무한 호출이 되는 현상을 볼 수 있을 것이다. 이러한 현상때문에 totalPage 를 변경을 할 수 없어 동적으로 페이지 수를 변경할 수 없다.

이 현상을 해결하기 위해서는 약간의 로직이 필요하다.

 

ajax 활용 방법

twbs 플러그인은 ajax를 사용하여 동적으로 페이지네이션 버튼 만들기 위해서는 

$("#pagination-div").twbsPagination("changeTotalPages", 총 페이지, 변경되고 난 후 선택될 페이지 번호); 

다음 함수를 사용해서 구현하기에는 클릭이벤트가 발생하기에 클릭이벤트가 있는 경우에는 여러번 호출되면서 로직이 꼬인다.

따라서 다음과 같이 구현해야 한다.

 

동적으로 총 페이지를 변경하기 위해서는 ajax를 통하여 온 데이터 중 전체 페이지 개수가 항상 필요하다.

또한 flag 값으로 onPageClick의 무한 호출을 방지해야 한다.

 

마지막으로 응답하는 JSON은 다음과 같이

{ "totalPageCount" : 3  , data : [{"content":"컨텐트1 "} ]}

전체 페이지 수에 대한 정보가 있어야 한다.

	$(document).ready(function(){
		$('#pagination-div').twbsPagination({
		    totalPages: 10,	// 총 페이지 번호 수
		    visiblePages: 7,	// 하단에서 한번에 보여지는 페이지 번호 수
		    startPage : 1, // 시작시 표시되는 현재 페이지
		    initiateStartPageClick: true,	// 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
		    first : "첫 페이지",	// 페이지네이션 버튼중 처음으로 돌아가는 버튼에 쓰여 있는 텍스트
		    prev : "이전 페이지",	// 이전 페이지 버튼에 쓰여있는 텍스트
		    next : "다음 페이지",	// 다음 페이지 버튼에 쓰여있는 텍스트
		    last : "마지막 페이지",	// 페이지네이션 버튼중 마지막으로 가는 버튼에 쓰여있는 텍스트
		    nextClass : "page-item next",	// 이전 페이지 CSS class
		    prevClass : "page-item prev",	// 다음 페이지 CSS class
		    lastClass : "page-item last",	// 마지막 페이지 CSS calss
		    firstClass : "page-item first",	// 첫 페이지 CSS class
		    pageClass : "page-item",	// 페이지 버튼의 CSS class
		    activeClass : "active",	// 클릭된 페이지 버튼의 CSS class
		    disabledClass : "disabled",	// 클릭 안된 페이지 버튼의 CSS class
		    anchorClass : "page-link",	//버튼 안의 앵커에 대한 CSS class
		    
		    onPageClick: function (event, page) {
		    	redraw(page);	
		    }
		});
		
	});
       
       
    var flag = true;	//이거 완전 중요함. 
    
    // $("#pagination-div").twbsPagination("changeTotalPages", 총 페이지, 변경되고 난 후 선택될 페이지 번호);
	// twbs 플러그인이 위에 changeTotalPages 를 사용하면 자동으로 onPageClick 한번더 호출 되도록 되어 있어서 
    // flag 를 줘서 무한 호출을 방지해야함.
    
    
    // 밑에는 대충 짠 코드 
    // json에는 항상 전체 페이지 개수가 응답되어야 한다.
    // ex ) { "totalPageCount" : 3  , data : [{"content":"컨텐트1 "} ]}
    
	function redraw(page){
		
		if(flag){
			flag = false;
			$.ajax({
				url : "/getBoard",
				data: {
					"page" : page
				},
				dataType:"JSON",
				contextType : "application/json",
				success: function(json){
					
					$("#pagination-div").twbsPagination("changeTotalPages", json[0].TOTALPAGECNT , page);
					
                    // 여기 아래에 컨텐츠를 만드는 로직 추가
                    // ex) $("content").html(html);
					
				},
				complete: function(){	// 이부분 중요
					flag = true;	//호출 완료되면 flag 값을 사용가능하게 변경
				}
				
			});
		}
		
	}
    

 

 

---

twbspagination plugin 예제 및 기본 옵션

 

[jQuery][bootstrap][pagination] twbspagination 예제 및 옵션 - 개발자 삽질 일기