Generate Page Numbers Using Javascript/jquery?

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

Solution 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:

<divid="display"><!-- This is the div where the visible page will be displayed --></div><divid="hiddenData"><!-- This is the div where you output your records --><divclass="record"><!-- create one record-div for each record you have in your JSON data --></div><divclass="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:

functionpageselectCallback(pageIndex, jq){
    // Clone the record that should be displayedvar newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
    // Update the display container
    $('#display').empty().append(newContent);
    returnfalse;
}

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.

functioninitPagination() {
    // Hide the records... they shouldn't be displayed
    $("#hiddenData").css("display", "none");
    // Get the number of recordsvar 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?

Solution 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

Solution 3:

Use THIS or THAT plugin. They're both easy html pagination plugins. Put everything in the html at once and paginate with one of those.

Solution 4:

Add two new hidden inputs

<inputtype='hidden'id='current_page' />  
<inputtype='hidden'id='show_per_page' /> 

Next add an empty div to create pagination controls

<!-- An empty div which will be populated using jQuery -->  
<divid='page_navigation'></div>

$(document).ready(function(){

    //how much items per page to showvar show_per_page = 5;
    //getting the amount of elements inside content divvar number_of_items = $('#content').children().size();
    //calculate the number of pages we are going to havevar number_of_pages = Math.ceil(number_of_items/show_per_page);

    //set the value of our hidden input fields
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);

    //now when we got all we need for the navigation let's make it '/*
    what are we going to have in the navigation?
        - link to previous page
        - links to specific pages
        - link to next page
    */var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

    $('#page_navigation').html(navigation_html);

    //add active_page class to the first page link
    $('#page_navigation .page_link:first').addClass('active_page');

    //hide all the elements inside content div
    $('#content').children().css('display', 'none');

    //and show the first n (show_per_page) elements
    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

functionprevious(){

    new_page = parseInt($('#current_page').val()) - 1;
    //if there is an item before the current active link run the functionif($('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

functionnext(){
    new_page = parseInt($('#current_page').val()) + 1;
    //if there is an item after the current active link run the functionif($('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
functiongo_to_page(page_num){
    //get the number of items shown per pagevar show_per_page = parseInt($('#show_per_page').val());

    //get the element number where to start the slice from
    start_from = page_num * show_per_page;

    //get the element number where to end the slice
    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

    /*get the page link that has longdesc attribute of the current page and add active_page class to it
    and remove that class from previously active page link*/
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

    //update the current page input field
    $('#current_page').val(page_num);
}