jquery - 如何使用同一类的所有div使用jquery创建分页？

我的页面上输出了100条记录（行）的对象结果。

但这太多了，我想在例如5页20行（结果）

如何仅使用jquery或一些简单的jquery插件创建带有分页的页面？

例如。我想使用类cars-result捕获所有内容，并为5个页面制作20个结果。

<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>

最佳答案

我希望这样的事情对你有用：

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');
    }
}

这只是非常简单，但是希望对您有所帮助。逻辑应该很容易理解。
不幸的是，我没有时间进行测试，但是可以随时询问是否不清楚，或者是否需要更改以满足您的需求。

关于jquery - 如何使用同一类的所有div使用jquery创建分页？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19348805/