创建分页

Question

我有大量的div全部显示在这个页面上（现在大约25个），并且每天越来越多地被添加。我想知道是否有一个易于使用的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

我认为为自己写一篇文章并不是一件大事。我从来没有见过一个库或插件这样的，但采取了一枪：http://www.sitepoint.com/10-jquery-pagination-plugins/

我认为，这可以这样进行：

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

将要显示的项目数量存储到变量中。 计数，你有多少物品。 检查网址，是否有像pageNum或其他什么的参数，告诉你什么是当前页面。 随着maxpage/itemsonpage的划分将会给你，你有多少页。 使用当前页面和itemsonpate可以计算出发点。

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

Answer 3

非常粗糙的版本，但我没有太多时间和核心工作，有一个或两个调整，如范围验证需要添加，但它应该工作。

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