2011-10-20 15 views
0

JSONエンコードされた配列を返すPHPのコントローラメソッドにajaxリクエストを行うjavascript関数があります。JavaScriptを使ったページネーションアルゴリズム

function initGallery(offset) { 
     if(offset === undefined) 
     { 
     var request_url = url+'avatar/gallery'; 
     } else { 
     var request_url = url+'avatar/gallery/'+offset; 
     } 
     $('#avatar_gallery').html('') 
     $.get(request_url,function(data) { 
      var dat = jQuery.parseJSON(data); 
      //Build gallery 
      $('#avatar_gallery').html('<div class="gallery_box"></div>'); 
      $('.gallery_box').append('<div class="gallery_header">Your Avatar Gallery</div>'); 
      $('.gallery_box').append('<div class="gallery_container"></div>'); 
      $.each(dat.avatars,function(index,item) 
      { 
       $('.gallery_container').append(
        '<div class="gallery_item">'+ 
        '<img src="'+item.avatar_src+'" id="'+item.avatar_id+'" onclick="avatar.view_avatar(this.id)"/>'+ 
        '</div>' 
       ); 
      }); 
       $('.gallery_box').append('<div class="gallery_footer"></div>'); 
       $('.gallery_footer').html('<div class="gallery_pagination"><div>'); 
     }); 
    } 

そして、これは私のコントローラメソッド

function gallery($offset= 0) 
    { 
     $limit = 12; 
     $user_id = $this->session->userdata('user_id'); 
     $data = $this->avatar_model->user_avatars($user_id,$limit,$offset); 
     $avatars = array(); 
     $count = $this->avatar_model->count_user_avatars($user_id); 
     $pages = ceil($count/$limit); 

     foreach($data as $key => $avatar) 
     { 
      $dat['avatar_id'] = $avatar->avatar_id; 
      $dat['avatar_src'] = $avatar->avatar_small; 
      $dat['create_date'] = time("d-m-Y",$avatar->create_date); 
      $avatars[] = $dat; 
     } 

     $server_response['avatar_count'] = $count; 
     $server_response['avatars'] = $avatars; 

     echo json_encode($server_response); 
    } 

である私は本当にのrequesから返されたデータをページ分割する方法についてのアイデアを持っていけません。 正しい方向を教えてください

答えて

1

これは簡単です。ページ設定リンクにクラスを追加します(full_tag_openfull_tag_close設定変数:<p class="pagination></p>を使用できます)。あなたは(私はjQueryの使用しています).pagination aクリックイベントを再定義することができます 後:私はこれがあなたの役に立てば幸い

function() { 
    $(".pagination a").click(function(event){ 
     event.preventDefault(); 
     YourJSFunction($(this).attr("href")); 
    }); 
} 

+0

あなたの提案を試しましたが、動作していないようですが、リンクは引き続きデフォルトの方法で動作します – MrFoh

+0

何がうまくいかなかったのですか? 'YourJSFunction()'は動いていますか? – uzsolt