ajaxが読み込んだデータを改ページする方法は？

Question

JQueryポストを使用してフォームからデータを読み込みます。

<div id="results"></div> 

に

$("#SortItmesForm").submit(function() { 
    $.post("filtItems.php", 
     $("#FiltItemsForm").serialize(), 
     function(data) { 
      /*alert(data);*/ 
      $('#results').html(data); 
     } 
    ); 
    return false; //Code after form submitted 
}); 

FiltItems.php出力次の通りです。

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

ロードされた結果を改ページする方法を教えてください。 JQueryを使用することをお勧めします。

私は多くのJQueryプラグインを試しましたが、どれもajaxがロードされたデータで動作しないようです。

Answer 1

もちろん、あなたのCSSもこの場合重要です。各liをページとして表示するとします。

<ul id="list_container"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
<a href="javascript:paginate.move('left');">&lt;</a> | <a href="javascript:paginate.move('right');">&gt;</a> 

CSS：

#results{ 
    width:200px; 
    height:200px; 
    overflow:hidden; 
} 

#list_container{ 
    width:600px; 
    margin-left:0px; 
} 

#list_container li{ 
    width:200px; 
    float:left; 
} 

JS：あなたが1ページにしている場合は、あなたが無効に左矢印と最後のページを無効にするよう

var paginate = { 
    cur_offset: 0, 
    move: function move(dir) 
    { 
     if(dir == 'left') 
     { 
      paginate.cur_offset -= 200; 
      $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000); 
     } 
     else 
     { 
      paginate.cur_offset += 200; 
      $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000); 
     } 
    } 
}; 

明らかにあなたが準備をしたいでしょうしかし、それは扱いやすいです。

質問が間違っている可能性もあります。

var elem = $('<div>'); 
elem.attr('id', some_id); 
elem.html(data.html); // assuming you pass json, if not then just data 
$('#results').append(elem); 

そしてまた、特定の場合にはjqueryの.liveに見て：あなたはAJAX呼び出しの結果をレンダリングするためにブラウザを得ることに問題がある場合、あなたがそうのようなDOM要素を設定する必要がありそうです関数が新しく作成されたDOM要素で機能していません。

プラグインについては、かなり曖昧です。ページネーションはかなり単純なことなので、私は頭の上からjqueryのための "ページネーション"プラグインを知らない。私は基本的なプラグインを検索する必要性を見いだしたことはありません。

この回答が役に立ちますが、詳細が必要な場合はお知らせください。可能であれば更新します。