Question

我正在努力从JSON文件中提取对象，并使用Salvattore将它们放入类似砖石的网格中。我发现this tutorial对于提取数据非常有用，但现在我想建立一个分页系统。目前我有它工作，以便在初始加载时只返回和填充6个对象，但我不知道如何编程＆＃34;加载更多＆＃34;按钮，以便它只附加下6个帖子。

这是我到目前为止所做的：

function getResults(filter) {
    $.getJSON("results.json", function(data) {
        var perPage = 6;
        var count = data.posts.length;
        $(data.posts).each(function (i, post) {
            if (filter) {
                if (post.source === filter && i < perPage) {
                    populate(post.source, post.permalink, post.content, post.date);
                }
            } else if(i < perPage) {
                populate(post.source, post.permalink, post.content, post.date);
            }
            i = i + 6;
        });
        perPage = perPage + 6;
    });
}
getResults();

我不完全确定应该设置它的逻辑是什么，所以我现在只是猜测/检查。如果有人能指出我正确的方向，将不胜感激。

Here is a Plunker，其中包含HTML / Sample JSON和我的其余JavaScript。

Answer 1

如果要将数据发送到后端，则需要发送该页面。你可以这样做：

var currentPage = 1;

function getResults(filter, page) {
    $.ajax({
        dataType: "json",
        url: url,
        data: {page: currentPage},
        success:  function(data) { ... code here ... }
    });
}

$('.load-more').click(function(e) {
    currentPage++;
    getResults();
});

但是，如果您要使用JSON显示数据，浏览器将在开始时下载整个JSON，因此您已拥有数据，然后您可以执行此操作：

var currentPage = 1;

$('.load-more').click(function(e) {
    currentPage++;
    getResults();
});

function getResults(filter) {
    $.getJSON("results.json", function(data) {
        var perPage = 6;
        var count = data.posts.length;
        if((currentPage-1) * perPage > count)
          alert("all pages fetched");
          return false;
        }
        $(data.posts).each(function (i, post) {
          if(i >= (currentPage -1) * perPage && i < currentPage * perPage) {
            if (filter) {
              if(post.source === filter) {
                populate(post.source, post.permalink, post.content, post.date);
              }
            } else {
                populate(post.source, post.permalink, post.content, post.date);
            }
            i = i + perPage;
          }
        });
        perPage += perPage;
    });
}

我在这里分叉了你的傻瓜：https://plnkr.co/edit/7kn2n9uhBPGZxXDLPLIz?p=preview

还有一个问题，追加功能无法正常工作，但可能是你库中的错误或者你使用它的方式。

设置＆＃34;加载更多＆＃34;使用getJSON获得JSON结果？

1 个答案: