질문Q #8210
jQuery를 이용한 ajax Pagination.
들국화2013-12-10 14:26:48
뒤져도 명확한게 없는거 같아 몇일 삽질한 내용 공유 합니다.
몇가지 방법들이 있었는데 이방법이 제 생각에는 심플 하네요.

아래 paging 라이브러리는 이전 사람이 약간수정해 놓은형태라서 조금 틀릴수 있는데..
일반적인 페이징 처리하는 로직데로 하시면 됩니다. 핵심은 js영역....
php
  $limit = 3;
  $page_scale = 10;
  $this->load->library('paging');
  $this->paging->init($data['review_total'], $this->input->get_post('start'), $limit, $page_scale, 'start', 'new_paging', '/post/view_review_ajax/'.$isrl);
  
  $comment_param['isrl'] = $isrl;
  $comment_param['start'] = $this->input->get_post('start');
  $comment_param['limit'] = $limit;
  $data['review_list'] = $this->itemdata->get_item_review_ajax($comment_param);
  $data['item_srl'] = $isrl;
  $data['start'] = $this->input->get_post('start');
  $data['review_paging'] = $this->paging->display();
$this->load->view('/parts/view_review_v', $data);

 
view_review_v.php
.
.
.
                 <?php if (!empty($review_paging)) { ?>
                <div class="paging" id="review_ajax_paging">
                 <?php echo $review_paging;?>
                </div>
                <?php } ?>

item_review.js
$(function() {
 applyPagination();

 function applyPagination() {
  $("div#review_ajax_paging a").on("click", function() {
   var url = $(this).attr("href");
   $.ajax({
    type : "POST",
    url : url,
    beforeSend : function() {
     $("#review_area").html("");
    },
    success : function(msg) {
     $("#review_area").html(msg);
     applyPagination();
    }
   });
   return false;
  });
 }

});
ci프레임워크를 보며 왜 ajax형태로 paging을 만들어 주는 라이브러리가 없을까 했었는데...
직접 구현하는 방법밖에 없네요.
이벤트를 캐치해서 사용하니 뭐 그리 나쁘지는 않네요.
일반적인 방법과 동일 하구요 변환 영역만 따로 만들어 pagination 클릭될때 a 태그 주소로 ajax실행해서 html을 뿌리는게 다이고요.

새로운 페이지를 읽어들였을때 click event를 잘 캐치하지 못하는 경우가 발생 하는데...
그래서 인지 recursive call 를 해 줍니다.

답변3
#1 수야디벨 2013-12-11 00:16:43
좋은 정보 감사합니다 .^^
#2 차카다이 2014-05-12 11:24:57
저는 이거 유투브에 외국 개발자가 구현한거 보고 구현한적 있는데.. 

필요하시면 검색해서 참고하시라고요 ㅋㅋ;
#3 한대승(불의회상) 2014-05-12 11:31:56
좋은정보 감사합니다. ^^
이걸 보니 저도 정리해 봐야 겠습니다.