如何分頁ajax加載數據？

我使用JQuery post從表單加載數據。如何分頁ajax加載數據？

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

FiltItems.php輸出到

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

如下。

<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加載的數據工作。

來源

2011-11-15 Marek Kotsulim

你是什麼意思'Pageinate'。你有什麼似乎很好地自行工作 – comu

嗨約翰。列表比實例中的長（可能達到1000個項目）。我想要做的是分頁加載列表讓我們說每頁20項，然後瀏覽結果，而不刷新頁面。 –

當然，在這種情況下，你的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：

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); 
     } 
    } 
};

顯然，你會想做出規定，所以如果你是第1頁上禁用左箭頭和最後一頁禁用正確但那些很容易處理。

我還有一個機會誤解了你的問題。如果您在獲得瀏覽器渲染你的Ajax調用的結果有問題，那麼很可能你需要設置DOM元素，像這樣：

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如果某些函數不適用於新創建的dom元素。

至於插件 - 這非常含糊。我不知道jquery的「分頁」插件，因爲分頁是一件非常簡單的事情。我從來沒有發現需要搜索一個基本的插件。

如果這個答案是有用的，但需要更多的信息，讓我知道，我會盡可能更新。

來源

2011-11-15 22:57:52

謝謝你的回覆啓清!!我在尋找插件的原因是因爲我對JavaScript和JQuery不太熟悉。我會盡力實施你的建議。你的回答非常有用，再次感謝！ –

如何分頁ajax加載數據？

回答

相關問題