TIP게시판

제목 jQuery를 이용한 ajax Pagination.
글쓴이 들국화 작성시각 2013/12/10 14:26:48
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 20271   RSS
뒤져도 명확한게 없는거 같아 몇일 삽질한 내용 공유 합니다.
몇가지 방법들이 있었는데 이방법이 제 생각에는 심플 하네요.

아래 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 를 해 줍니다.

 다음글 [어리버리팁 01] database autoinit T... (2)
 이전글 유용하지만 잘 사용되지 않는 CI 상수들 (2)

댓글

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

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