如何使用相同類的所有div使用jquery創建分頁？

Question

我有一個對象結果有100個記錄（行）在我的頁面上輸出。

但它太多了，我想在例如5頁20行（結果）

如何使用jquery或一些簡單的jquery插件創建頁面分頁？

E.g.我想抓住一個類cars-result的一切，併爲20個結果做5頁。

<div id="main"> 

    <div class="cars-result"> 
      <h3>Result 1</h3> 
      <div>Category: Dog</div> 
      <p>dfasdf asdf asf asdf asdf asfd </p> 
    </div> 

    <div class="cars-result"> 
      <h3>Result 2</h3> 
      <div>Category: Cat</div> 
      <p>dfasdf asdf asf asdf asdf asfd </p> 
    </div> 

    <div class="cars-result"> 
      <h3>Result 3</h3> 
      <div>Category: Dog</div> 
      <p>dfasdf asdf asf asdf asdf asfd </p> 
    </div> 

    <div class="cars-result"> 
      <h3>Result 4/h3> 
      <div>Category: Dog</div> 
      <p>dfasdf asdf asf asdf asdf asfd </p> 
    </div> 

    ... 


</div> 

Answer 1

我希望這樣的事情工作爲你：

HTML：

<div id="main"></div> 
<div id="paging"></div> 

第一個div是一個頁面的條目的容器。 第二個div包含通過頁面進行分頁所需的鏈接。

的jQuery：

var results = [], // contains your rows 
    page = 1, // current page 
    pagesize = 20; // items per page 

// load objects and generate entries and paging links 
$(document).ready(function() { 
    // objects = GetObjects(); 
    loadPage(); 
    generatePagingLinks(); 
}) 

// changing page when user clicks on a paging link 
$("#paging").on("click", "a", function() { 
    page = $(this).text(); 
    loadPage(); 
}); 

// function for generating paging links 
function generatePagingLinks() { 
    var links = Math.ceil(results.length/pagesize); // calculate number of links 

    $("#paging").children("a").remove(); // Remove existing paging links 

    // generate new paging links 
    for (var i = 0; i < links; i++) 
     $("<a>").attr("href", "#").text(i + 1).appendTo("#paging"); 
} 

// function for loading the entries of a single page 
function loadPage() { 
    // Remove existing entries 
    $("#main").children(".cars-result").remove(); 

    // Iterate through objects and generate new entries 
    for (var i = pagesize * page - 1; i < pagesize * page; i++) { 
     if (!objects[i]) 
      break; 

     var div = $("<div>").addClass("cars-result"); 
     $("<h3>").text(results[i].Head).appendTo(div); 
     $("<div>").text(results[i].Category).appendTo(div); 
     $("<p>").text(results[i].Text).appendTo(div); 

     $(div).appendTo('#main'); 
    } 
} 

這只是很簡單的，但我希望它可以幫助你。邏輯應該很容易理解。 不幸的是，我沒有時間去測試它，但可以自由地詢問一些事情是否不清楚，或者有些事情需要改變以適應您的需求。