如何使用jquery顯示更多列表

Question

我提取消息並使用PHP/MySQL進行顯示。

現在我只想顯示10個列表。

我想添加按鈕。當我點擊這個按鈕時，它順利地滑落並顯示另外10條總共20條消息。

如果我點擊按鈕，它再次滑下並顯示總共30條消息。

任何人都可以教我如何使用jquery嗎？

在此先感謝。

Answer 1

使用JavaScript來保存關於正在顯示有多少行狀態信息等

有按鈕調用JS函數，通過AJAX返回數據。 ajax調用的結果可以是HTML並注入到div標籤中。 JS函數需要更新狀態信息（每次增加行數等），並將該狀態信息傳遞給ajax調用。

ajax調用的目標可以是執行MySQL查詢並生成傳回的HTML的PHP​​腳本。

Answer 2

原則上，您希望容器放置所有新提取的消息。

<div id="messages"> 
    <! -- message 1 --> 
    <! -- message 2 --> 
    <div id="newMessages"> 
    </div> 
</div> 

然後你想有一個按鈕（或錨，或其他），你可以連接到一個獲取 - 更方法：

<input type="button" value="Fetch more messages" id="btnFetchMessages" /> 

廣場內domready中的聯播地方：

var lastFetchedMessage = 0; 

$('#btnFetchMessages').click(function() { 
    $.ajax({ 
     url: '/getMessages.php', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     data: '{"lastId":'+lastFetchedMesasge+'"}', 
     success: newMessagesReceived 
}); 

所以按鈕的點擊，我們提交一個Ajax請求getMessages.php在那裏你會看lastFetchedMessage並返回基於的是，10個左右的下一個消息。從這個頁面，你返回JSON陣列包含的信息，他們所有的信息，你有興趣

在成功AJAX reques，該功能可按newMessagesReceived將被稱爲：

function newMessagesReceived(result) { 
    var container = $('#newMessages'); 

    for(var i = 0; i < result.length; i++) { 
     var message = $('<div>' + result[i].body + '</div>'); 
     container.append(message); 
    } 

    var lastFetchedMessage = result[i].id; 
} 

以上假定您返回與消息的數組，即至少有屬性body和id：

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ] 

Answer 3

在我的最新項目，我用jQuery tools scrollable顯示最新20項目列表（<ul><li>）。當列表滾動到最後一頁時，我獲取下20個項目，然後將其附加到列表的末尾，使用jquery工具api中的構建。這將繼續，直到AJAX請求返回空結果，表示數據庫中沒有更多列表。我有一個變量作爲標誌，然後我將它設置爲false，所以當列表滾動到最後一頁時，沒有任何AJAX請求被觸發。

你可能會看到它看起來像twitter的主頁，但沒有'更多'的鏈接，因爲列表自動附加。

不幸的是，現在該項目仍然在阿爾法，所以我不能在這裏展示它。你可以嘗試它並在這裏發佈你的代碼，我會幫你調整它。