创建分页答案

【问题标题】：Creating a pagination创建分页
【发布时间】：2014-10-20 22:26:05
【问题描述】：

我在这一页上显示了大量的 div（现在大约 25 个），并且每天都在添加越来越多的 div。我想知道是否有一个易于使用的 jQuery 库来利用分页，或者是否有一个非常简单的脚本可以编写来分解这些，而无需手动制作所有额外的页面。这是我的 HTML（非常基本和简单）。甚至可能使用 Ajax 方法？不过我对写 Ajax 不是很熟悉，这就是我来这里的原因

<section class="stories">
  <h2>The Stories</h2>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

  <div class="story">
      <h4>Title</h4>
      <p>Story info</p>
  </div>

</section>

【问题讨论】：

现在为您创建一个分页功能，大约需要 5 分钟

标签： jquery html pagination

【解决方案1】：

听起来您正在使用表格数据，在这种情况下，表格可能是最好的方法。由于您无论如何都不是非常熟悉该过程，因此不使用库的理由绝对为零。

我强烈推荐DataTables.js。

【讨论】：

没有任何理由使用包含这些信息的表格，因为它只是一个标题，然后是故事。有没有更好的只关注分页的库？
这是一个整洁的库，可以满足我的要求，但如果所有故事的长度不同，这张表看起来会很糟糕。我只是无法想象使用这种布局的表格
@user3532666 是的，它们是几个分页库，lolka_bolka 的回答提供了一些列表的链接。我仍然建议为此查看一张桌子。除非你打算有一个无序列表。

【解决方案2】：

非常粗略的版本，但我没有太多时间，核心工作在那里，需要添加一两个调整，例如范围验证，但它仍然可以工作。

var start = 0;
var ending = 5;
var jump = 5;
var count = 0;
var stories = $('.story');
function paginate() {
    stories.show();
    $.each(stories, function() {
        if(count > ending && count < start) {
            $(this).hide();
        }
        count++;
    });
}

$('#next').on('click', function() {
    start += jump;
    ending += jump;
    paginate();
});

$('#prev').on('click', function() {
    start -= jump;
    ending -= jump;
    paginate();
});

paginate();

【讨论】：

如果有人可以花 5 分钟时间来编辑此内容，那么这是万无一失的证明，将不胜感激！

【解决方案3】：

我认为为自己写一个不是一件大事。我从来没有遇到过这样的库或插件，但请尝试一下：http://www.sitepoint.com/10-jquery-pagination-plugins/

我认为，可以这样完成：

需要显示的项目数。需要物品的数量。需要你有多少页。需要当前页面。

将要显示的项目数存储到变量中。数一数，你有多少物品。检查 url，是否有像 pageNum 这样的参数，告诉你什么，当前页面是什么。随着maxpage / itemsonpage 的划分，四舍五入会给你，你有多少页。使用当前页面和itemonpate，您可以计算起点。

你可以使用hases来存储当前页面是什么。

【讨论】：