使用Jquery的AJAX分页插件

Question

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

除了"pageSize“属性之外，一切都运行得很好。我想每页显示3个项目，但它在第一页一次显示所有数据。我该怎么解决它呢？

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

HTML

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

JS

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

Answer 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调用的数量减少到一个。