使用jQuery促进“加载更多”分页的最好方法是什么？

Question

我在页面上显示搜索结果列表。在最底部我想放一个“加载更多”的链接，将更多的结果追加到现有的页面上，并改变“加载更多”链接的参数到下一页，这样，如果用户点击它，下一页将被追加到页面。如果在加载结果时出现“请稍候”或一些消息，也会很好。

使用jQuery实现这一点的最常用和最实用的方法是什么？

谢谢!

Answer 1

我使用类似于下面的内容。这是对我的工作解决方案的简化，省略了不相关的部分。希望这篇文章能帮助你入门：

function loadMore(pageNo) {
    $("#loading").html('Loading...').show();
    var url = '/foo/';
    $.get(url, {pageNo: pageNo}, function(response) {
        $("#results").append(response);
        $("#loading").hide();
    });
}

$(document).ready(function() {
    var currPage = 1;
    $("a.next").click(function() {
        loadMore(++currPage);
    });
});

<a class="next">More results</a>

Answer 2

并不是很难。执行以下操作

1)在您的“加载更多”链接上注册一个自定义处理程序。例如，类似这样的内容

$j('a[name=pageForward]').each(function() {
     $j(this).click(function(e) {
         e.preventDefault();
         defaultPage++;
         doSearch(defaultPage);
      });
})

请注意，我向锚点标记添加了一个name属性。doSearch具有以下功能：

2)触发ajax以加载更多内容。另外，将load more的内容替换为'Loading‘或其他什么

$.ajax({
        url: url,
        data: queryString,
        dataType: json or xml,
        cache: false,
        beforeSend: function(xhr) {
        },
        success: function(data, status, xhr) {
        },
        error: function(xhr, status, errorText) {
            that.showNothing();
        },
        complete: function(xhr, status) {
        }
    });

查看$.ajax的jquery文档，了解它们各自的含义。如果你愿意，你可以在前面修改dom并完成你注册的回调。

3)在ajax完成时，填充数据，并更改回链接(或删除“正在加载”消息)。

作为个人偏好，我会禁用2中的链接，并在加载发生时显示一个带有“正在加载”消息的特殊div。

此外，更高级的方法是为分页视图创建一个jquery插件……