如何使用 jquery 显示更多列表答案

【问题标题】：How to show more list using jquery如何使用 jquery 显示更多列表
【发布时间】：2011-01-05 19:55:37
【问题描述】：

我用 PHP/MySQL 提取消息并显示。

现在我只想显示 10 个列表。

我想添加按钮。当我单击此按钮时，它会平滑地向下滑动并显示另外 10 条消息，总共 20 条消息。

如果我单击按钮，它会再次向下滑动并显示总共 30 条消息。

谁能教我怎么用jquery做呢？

提前致谢。

【问题讨论】：

这些新消息是通过 Ajax 从服务器获取的吗？

标签： jquery slidedown

【解决方案1】：

在我的最新项目中，我使用jQuery tools scrollable 在列表中显示 20 个最新项目 (<ul><li>)。当列表滚动到最后一页时，我获取接下来的 20 个项目，然后使用内置 jquery 工具 api 将其附加到列表的末尾。这将一直持续到 AJAX 请求返回空结果，这表明数据库中没有更多列表。我有一个变量作为标志，然后我将其设置为 false，因此当列表滚动到最后一页时不会触发 AJAX 请求。

您可能会看到它看起来像 twitter 主页，但没有“更多”链接，因为列表是自动附加的。

不幸的是，目前该项目仍处于 alpha 阶段，因此我无法在此处展示。你可以试试，把你的代码贴在这里，我会帮你调整的。

【讨论】：

谢谢，这正是我想要的！完整的演示可以在这里找到 - flowplayer.org/tools/scrollable/#demos

【解决方案2】：

原则上，您需要一个容器来放置所有新获取的消息。

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

然后你想要一个可以连接到 fetch-more-method 的按钮（或锚点，或其他）：

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

因此，单击按钮后，我们向getMessages.php 提交了一个AJAX 请求，您将在其中查看lastFetchedMessage 并基于此返回大约10 条下一条消息。从该页面，您返回一个包含消息的 JSON 数组，以及您感兴趣的所有信息。

AJAX 请求成功后，函数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" } ]

【讨论】：

【解决方案3】：

使用 javascript 保存有关正在显示的行数等的状态信息。

让按钮调用一个通过 ajax 返回数据的 JS 函数。 ajax 调用的结果可以是 HTML 并注入到 div 标签中。 JS 函数需要更新状态信息（每次增加行数等），并将状态信息传递给 ajax 调用。

ajax 调用的目标可以是执行 MySQL 查询并生成传回的 HTML 的 PHP 脚本。

【讨论】：