Générer des numéros de page en utilisant javascript/jquery?

Question

Comment générer des numéros de page comme ci-dessous en utilisant javascript/jquery?

Si la page 5 e est sélectionné, je dois montrer 3,4 et 6,7 et aussi 1, dernière page avec précédent, suivant ... Toute suggestion ....

EDIT:

Comment utiliser les données json qui utilisent ces div de pagination? (c'est-à-dire) Mes données json contient 50 enregistrements Je veux 10 dans la page 1 et ainsi de suite ... Comment paginer des données json avec ces nombres ...

Je veux une fonction de jquery pour passer currentpageno,lastpagenumber et la fonction devrait me générer des numéros de page comme le ci-dessous pour moi

Si elle est la première page

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

Si elle est au milieu,

Pager http://img98.imageshack.us/img98/7278/pagersy.jpg

Si elle est la dernière page,

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

Deuxième EDIT:

J'ai essayé cette fonction, mais ne semble pas obtenir le résultat souhaité

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

J'ai les valeurs lastPage et currentPage s'il vous plaît aidez-moi obtenir ce ...

Answer 1

Ce que vous cherchez est appelé "pagination" et il y a (comme toujours) un plugin jQuery qui fait le travail pour vous:

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

(Télécharger ce here)

---

Edit: Puisque vous ne semblez pas être en mesure de le faire fonctionner, est une façon ici (de plusieurs différentes) comment vous pouvez utiliser le plug-in.

Étape 1: Générer le balisage de vos données JSON comme ce qui suit:

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

L'idée est de copier l'enregistrement correspondant à l'affichage div en cliquant sur une page lien. Par conséquent, le plugin propose une fonction pageSelect-callback. Étape 2 est de mettre en œuvre cette fonction, par exemple:

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

Cela signifie que vous avez une page par dossier. Si vous souhaitez afficher plusieurs enregistrements par page, vous devez modifier la fonction ci-dessus en conséquence.

La troisième et dernière étape consiste à initialiser le tout correctement.

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

Alors, il vous suffit de générer le balisage HTML à partir de vos données JSON et appeler la fonction init par la suite.

Ce n'est pas si difficile, n'est-ce pas?

Answer 2

ouais @SLaks a raison. rien de trop fou ici. Vous aurez 2 variables currentPageNumber et 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 

Answer 3

Utilisez THIS ou THAT plug-in. Ils sont tous deux des plugins de pagination html faciles. Mettez tout dans le code HTML à la fois et paginez avec l'un d'entre eux.

Answer 4

Ajouter deux nouvelles entrées cachées

<input type='hidden' id='current_page' /> 
<input type='hidden' id='show_per_page' /> 

Ensuite, ajoutez un div vide pour créer des contrôles de paginations

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

$(document).ready(function(){ 

    //how much items per page to show 
    var show_per_page = 5; 
    //getting the amount of elements inside content div 
    var number_of_items = $('#content').children().size(); 
    //calculate the number of pages we are going to have 
    var 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'); 

}); 

function previous(){ 

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

} 

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

} 
function go_to_page(page_num){ 
    //get the number of items shown per page 
    var 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); 
}