創建分頁

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