Question

我在这一页上显示了大量的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>

Answer 1

听起来您正在使用表格数据，在这种情况下，表格可能是最佳方法。由于您无论如何都不是非常熟悉这个过程，因此没有使用图书馆的理由绝对没有。

我强烈推荐DataTables.js。

Answer 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();

Answer 3

我认为为自己写一个并不是一件大事。我从来没有见过像这样的图书馆或插件，但是拍了一下：http://www.sitepoint.com/10-jquery-pagination-plugins/

我认为，这可以这样做：

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

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

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

创建一个分页

3 个答案: