Javascript 使用Jquery使用AJAX分页插件

我正在使用ajax进行分页

除了“pageSize”属性外，其他一切都正常工作。我想每页显示3项，但它在第一页中同时显示所有数据。我怎样才能解决它

我已在此处附上我的代码：

HTML

---

由于这个FlickrAPI端点总是返回其选择的20个项目，并且不识别任何指示其分页结果的参数，因此pagination.js逻辑背后的假设不起作用。该插件似乎假定返回的数据已经分页

因此，您需要自己在“回调”函数中实现分页逻辑。使用提供给回调的pageNumber和pageSize变量，并通过适当地分割结果数组，可以非常轻松地完成此操作。下面是一个演示：

$（函数（）{
var容器=$（“#演示”）；
容器分页({
数据源：'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
定位器：“项目”，
总数：20，
页面大小：3，
阿贾克斯：{
beforeSend:function（）{
container.prev（）.html（'从flickr.com加载数据…'）；
}
},
回调：函数（响应、分页）{
var dataHtml=“
”；
var pageStart=（pagination.pageNumber-1）*pagination.pageSize；
var pageEnd=pageStart+pagination.pageSize；
var pageItems=response.slice（pageStart，pageEnd）；
$.each（页面项，函数（索引，项）{
dataHtml+='
'+item.title+'
'；
});
dataHtml+='
'；
container.prev（）.html（dataHtml）；
}
})
})

什么是

。分页（

？它不是一个内置的jQuery函数。如果您使用的是插件，请指定其名称，最好还向我们提供指向其网站和文档的链接。否则，我们很难知道该函数实际应该做什么，或者您是否正确配置了它。您不能假设我们都熟悉sp你正在使用的特定东西。P.S.如果你想每页显示3个项目，那么为什么你要将页面大小设置为5？好的..我参考了网站。对不起，这是我的错误，我只想显示3个项目，但无论如何，如果我给出

pageSize

，无论它显示每页中的所有数据。实际上，问题是在回调属性中传递所有数据因此，我认为如何根据页面大小进行判断是有错误的。谢谢。所以…您说“在这里显示第一页中的所有数据”，但您的代码实际上并没有这样做。它只显示一个项目（最后一个），因为在`$.中，每个项目（数据、函数（索引、项目）{html=“running”+index；}）`您每次都会覆盖

html

。要获得您描述的行为，您需要编写

html+=“running”+index；

相反。请确保您在此处发布的任何代码都真实地再现了您所谈论的问题！显然，这样做只是插入了接收到的所有内容，而忽略了pageSize指令。目前尚不清楚在这种情况下，pageSize是否可以实际应用，除非您手动选择要包含的正确记录但是由于回调没有告诉你当前选择的页码，我不知道你怎么做。

<div class="container">
  <div id="demo"></div>
  <div class="dataContainer"></div>
</div>

$(document).ready(function () {
  $('#demo').pagination({
    dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: "items",
    totalNumber: 20,
    pageSize: 5,
    pageRange: 2,
    ajax: {
        beforeSend: function () {
            $(".dataContainer").html('Loading data from flickr.com ...');
        }
    },
    callback: function (data, pagination) {
        var html = simpleTemplating(data);
        $(".dataContainer").html(html);
    }
  });

  function simpleTemplating(data) {
    var html;
    $.each(data, function (index, item) {
        html = "running" + index;
    });
    return html;
  }
});