Generate page numbers using javascript/jquery?

Question

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

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

EDIT:

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

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

If it is the first page

If it is in the middle,

If it is the last page,

Second EDIT:

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

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

Answer 1

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

(Download it here)

---

Edit: 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.

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>

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

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

It's not that difficult, is it?

Answer 2

yeah @SLaks is right. nothing too crazy here. You will have 2 variables currentPageNumber and lastPageNumber.

$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");

for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
    $("div.paginator").append("<a...>"+ x +"</a>");
} 

$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");

// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber 
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to