使用javascript/jquery生成页码？

Question

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

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

编辑:

如何使用这些分页div的json数据？(即)我的json数据在第1页中包含我想要的50条记录,依此类推......如何使用这些数字对json数据进行分页...

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

如果是第一页

istpage http://img156.imageshack.us/img156/2527/1pagel.jpg

如果它在中间,

传呼机http://img98.imageshack.us/img98/7278/pagersy.jpg

如果是最后一页,

最后一页http://img204.imageshack.us/img204/541/lastpage.jpg

第二次编辑:

我尝试过这个功能,但似乎没有得到理想的结果

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

(在这里下载)

编辑:由于您似乎无法使其工作,这里有一种方式(几种不同)如何使用该插件.

第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-callback函数.第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标记,然后调用init-function.

它不是那么难,是吗？