| 제목 | 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 를 해 줍니다. | |||
| 다음글 | [어리버리팁 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
                             
                                좋은정보 감사합니다. ^^ 이걸 보니 저도 정리해 봐야 겠습니다. |