javascript - 使用 javascript/jquery 生成页码？

Question

如何使用 javascript/jquery 生成如下页码？

如果选择第 5 页，我必须显示 3,4 和 6,7 以及 1，最后一页，上一页，下一页......任何建议....

编辑:

如何处理使用这些分页 div 的 json 数据？ (ie) 我的 json 数据包含 50 条记录我想在第 1 页中显示 10，依此类推...如何使用这些数字对 json 数据进行分页...

我想要一个 jquery 函数来传递 currentpageno,lastpagenumber 并且该函数应该为我生成如下页码

如果是第一页

如果在中间，

如果是最后一页，

第二次编辑:

我试过这个功能，但似乎没有得到想要的结果

function generatePages(currentPage, LastPage) {
    if (LastPage <= 5) {
        var pages = '';
        for(var i=1;i<=5;i++)
        {
            pages += "<a class='page-numbers' href='#'>" + i + "</a>"
        }
        $("#PagerDiv").append(pages);
    }
    if (LastPage > 5) {
        var pages = '';
        for (var i = 1; i <= 5; i++) {
            pages += "<a class='page-numbers' href='#'>" + i + "</a>"
        }
        $("#PagerDiv").append(pages);
    }
}

我有 lastPage 和 currentPage 值请帮我弄清楚...

Answer 1

您正在寻找的是所谓的“分页”，并且(一如既往)有一个 jQuery 插件可以为您完成这项工作:

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

(下载here)

---

编辑:由于您似乎无法使其正常工作，这里提供了一种(几种不同的)使用插件的方法。

第 1 步:从您的 JSON 数据生成标记，如下所示:

<div id="display">
    <!-- This is the div where the visible page will be displayed -->
</div>

<div id="hiddenData">
    <!-- This is the div where you output your records -->
    <div class="record">
        <!-- create one record-div for each record you have in your JSON data -->
    </div>
    <div class="record">
    </div>
</div>

想法是在单击页面链接时将相应的记录复制到显示 div。因此，该插件提供了一个 pageSelect 回调函数。 第2步实现该功能，例如:

function pageselectCallback(pageIndex, jq){
    // Clone the record that should be displayed
    var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
    // Update the display container
    $('#display').empty().append(newContent);
    return false;
}

这意味着每条记录有一页。如果你想每页显示多条记录，你必须相应地修改上面的函数。

第三步也是最后一步是正确初始化整个事情。

function initPagination() {
    // Hide the records... they shouldn't be displayed
    $("#hiddenData").css("display", "none");
    // Get the number of records
    var numEntries = $('#hiddenData div.result').length;
    // Create pagination element
    $("#pagination").pagination(numEntries, {
        num_edge_entries: 2,
        num_display_entries: 8, // number of page links displayed 
        callback: pageselectCallback,
        items_per_page: 1  // Adjust this value if you change the callback!
    });
}

因此，您只需从 JSON 数据生成 HTML 标记，然后调用初始化函数。

没那么难吧？