2

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

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

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

例如，我想用一堂课来抓住一切，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>
4

1 回答 1

3

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

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

这很简单，但我希望它对你有帮助。逻辑应该很容易理解。不幸的是，我没有时间对其进行测试，但如果有什么不清楚的地方，或者是否需要根据您的需要进行更改，请随时询问。

于 2013-10-13T19:55:54.780 回答