使用pagination.js实现AJAX分页时pageSize属性失效问题求助

看起来你遇到的核心问题是分页插件没有按照指定的pageSize切割数据，导致第一页直接显示了所有内容。我们一步步来排查并解决：

问题分析 #

从你的代码来看，有两个关键问题导致了这个现象：

1. 模板函数的变量覆盖错误 #

你的simpleTemplating函数里，每次循环都用html = "running" + index直接覆盖变量，这会导致最终只返回最后一条数据的内容。不过你提到显示了所有数据，说明你实际代码里可能是用了累加（比如html +=），但即使这样，插件没有分页的话，传入callback的data还是全部数据，自然会显示所有内容。

2. 手动设置totalNumber干扰分页逻辑 #

你手动指定了totalNumber: 20，但Flickr的API返回的items数量可能和这个值不匹配，这会打乱pagination.js的自动分页计算，导致插件没有正确对数据进行分页切割。

修复步骤 #

步骤1：修正模板函数 #

确保模板函数正确累加每条数据的内容，而不是覆盖：

function simpleTemplating(data) {
  var html = ''; // 初始化空字符串
  $.each(data, function (index, item) {
    // 可以根据需求渲染内容，比如显示图片或文本
    html += `
      <div class="photo-item">
        <p>running${index}</p>
        <img src="${item.media.m}" alt="Cat photo">
      </div>
    `;
  });
  return html;
}

步骤2：调整pagination配置 #

移除手动设置的totalNumber，让插件自动从返回的items数组中计算总数据量；同时将pageSize设置为你期望的3条：

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

步骤3：验证插件行为 #

修改后，插件会自动从Flickr返回的items数组中获取总条数，然后按照pageSize:3进行客户端分页，每次callback传入的data都会是当前页的3条数据，这样就能正确显示分页内容了。

额外提示 #

• 确保你使用的是最新版本的pagination.js，旧版本可能对JSONP数据源的处理存在兼容问题。
• 如果后续需要切换为服务器端分页，你需要调整API支持分页参数（比如page、pageSize），并在插件配置中开启serverSide: true，当前场景是客户端分页，不需要这个设置。

内容的提问来源于stack exchange，提问作者Nisha Basha