时间戳

首页 > 解决方案 > 使用 Jquery 的 AJAX 分页插件

javascript - 使用 Jquery 的 AJAX 分页插件

问题描述

我正在使用 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;
  }
});

标签： javascriptjqueryhtmlpagination

解决方案

由于此 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>

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

推荐阅读