使用 Jquery 的 AJAX 分页插件答案

【问题标题】：Pagination plugin with AJAX using Jquery使用 Jquery 的 AJAX 分页插件
【发布时间】：2019-10-10 20:31:39
【问题描述】：

我正在使用 pagination.js 使用 ajax 进行分页。

除“pageSize”属性外，一切正常。我想每页显示 3 个项目，但它在第一页一次显示所有数据。我该如何解决？

我在这里附上了我的代码：

HTML

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

【问题讨论】：

什么是.pagination(？它不是一个内置的 jQuery 函数。如果您使用插件，请指定其名称，最好还向我们提供指向其网站和文档的链接。否则我们很难知道这个函数实际上应该做什么，或者你是否正确配置了它。你不能假设我们都熟悉你正在使用的具体东西。
P.S.如果您想每页显示 3 个项目，那么为什么将页面大小设置为 5？
好的.. 我提到了pagination.js.org 网站。抱歉，这是我的错误，我只想显示 3 个项目，但无论如何，如果我给 pageSize，不管它在每个页面中显示所有数据。实际上问题是在回调属性中传递所有数据，所以我认为有一些错误，所以如何制作基于页面大小。
谢谢。所以......你说“这里显示第一页本身的所有数据”，但你的代码实际上并没有这样做。它只显示一项（最后一项），因为在` $.each(data, function (index, item) { html = "running" + index; });`中您每次都会覆盖html。要获得您所描述的行为，您需要改写html += "running" + index;。请确保您在此处发布的任何代码实际上都重现了您正在谈论的问题！
显然，这样做只是插入收到的所有内容，而忽略 pageSize 指令。目前尚不清楚在这种情况下如何或是否可以实际应用 pageSize，除非您手动选择要包含在每个页面中的正确记录。但是由于回调没有告诉你当前选择的页码，我不明白你怎么能做到这一点。

标签： javascript jquery html pagination

【解决方案1】：

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

因此，您需要在“回调”函数中自己实现分页逻辑。您可以使用提供给回调的 pageNumber 和 pageSize 变量，并通过对结果数组进行适当的切片来相当容易地做到这一点。这是一个演示：

$(function() {
  var container = $('#demo');
  container.pagination({
    dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: 'items',
    totalNumber: 20,
    pageSize: 3,
    ajax: {
      beforeSend: function() {
        container.prev().html('Loading data from flickr.com ...');
      }
    },
    callback: function(response, pagination) {
      var dataHtml = '<ul>';
      var pageStart = (pagination.pageNumber - 1) * pagination.pageSize;
      var pageEnd = pageStart + pagination.pageSize;
      var pageItems = response.slice(pageStart, pageEnd);
      $.each(pageItems, function(index, item) {
        dataHtml += '<li>' + item.title + '</li>';
      });

      dataHtml += '</ul>';

      container.prev().html(dataHtml);
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css" rel="stylesheet" />
<div id="wrapper">
  <section>
    <div class="data-container"></div>
    <div id="demo"></div>
  </section>
</div>

注意这有点低效，因为每次您移动到新页面时，它实际上都会再次从 API 获取所有数据。您可能会更好地向端点发出自己的 AJAX 请求，获取返回的数据并将其作为静态数组传递给分页插件。这样您就不需要自己的分页逻辑，并且可以将 AJAX 调用次数减少到一个。

【讨论】：