使用javascript / jquery生成页码？ [英] Generate page numbers using javascript/jquery?

问题描述

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

How to generate page numbers like the below using javascript/jquery?

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

If the 5 th page is selected i have to show 3,4 and 6,7 and also 1,last page with prev,next... Any suggestion....

编辑：

如何使用这些分页div的json数据？ （即）我的json数据包含50个记录
我希望在第1页中有10个等等...如何使用这些数字对json数据进行分页...

How to work with json data that use these pagination div? (ie) My json data contains 50 records I want to 10 in page 1 and so on... How to paginate json data with these numbers...

我想要一个jquery函数来传递 currentpageno，lastpagenumber ，该函数应该为我生成如下页面编号

I want a jquery function to pass currentpageno,lastpagenumber and the function should generate me page numbers like the below for me

如果是第一页

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

如果它在中间，

Pager http：// img98。 imageshack.us/img98/7278/pagersy.jpg

如果是最后一页，

lastpage http://img204.imageshack.us/img204/541/lastpage.jpg

第二次编辑：

我试过这个函数似乎没有得到想要的结果

I have tried this function but doesn't seem to get the desired result

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 值请帮我解决这个问题...

I have the lastPage and currentPage values please help me out getting this...

推荐答案

你正在寻找的是分页，并且（一如既往）一个jQuery插件可以为你完成这项工作：

What you are looking for is called "pagination" and there's (as always) a jQuery plugin that does the job for you:

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

（下载这里）

编辑：因为您似乎无法获得它工作，这是一种方式（几种不同）如何使用该插件。

Since you don't seem to be able to get it working, here is one way (of several different) how you can use the plugin.

步骤1：从您的JSON生成标记 - 数据如下：

Step 1: Generate markup from your JSON-data like the following:

<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步是实现此功能，例如：

The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2 is to implement this function, for instance:

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

这意味着每条记录只有一页。如果要在每页显示多个记录，则必须相应地修改上述功能。

This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.

第三步也是最后一步是初始化完整的事情。

The third and final step is to initialize the whole thing correctly.

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标记并调用之后的初始函数。

So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.

这不是那么难，是吗？

这篇关于使用javascript / jquery生成页码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！