¿Generar números de página usando javascript/jquery?

Question

¿Cómo generar números de página como el siguiente usando javascript/jquery?

Si se selecciona la página 5º tengo que mostrar 3,4 y 6,7 y 1, última página con el anterior, al lado ... Cualquier sugerencia ....

EDIT:

¿Cómo trabajar con los datos json que usan estos pagination div? (Es decir) Mis datos JSON contiene 50 registros Quiero 10 en la página 1 y así sucesivamente ... ¿Cómo paginar datos JSON con estos números ...

quiero una función jQuery para pasar currentpageno,lastpagenumber y la función debe me generar números de página como el siguiente para mí

Si se trata de la primera página

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

Si está en el medio,

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

Si se trata de la última página,

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

Segunda EDIT:

He tratado de esta función, pero no parece para obtener el resultado deseado

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

Tengo los valores lastPage y currentPage por favor ayúdenme conseguir este ...

Answer 1

Lo que usted está buscando se llama "paginación" y no (como siempre) un plugin de jQuery que hace el trabajo para usted:

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

(descargarlo here)

---

Editar: Puesto que no parece ser capaz de hacerlo funcionar, aquí es una forma (de varios diferentes) cómo se puede utilizar el plugin.

Paso 1: generan marcado desde sus JSON-datos como el siguiente:

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

La idea es copiar el registro correspondiente a la div pantalla al hacer clic en una página de vínculos. Por lo tanto, el complemento ofrece una función pageSelect-callback. Paso 2 es implementar esta función, por ejemplo:

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

Esto significa que usted tiene una página por cada registro. Si desea visualizar múltiples registros por página, debe modificar la función anterior en consecuencia.

El tercer y último paso es inicializar todo correctamente.

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

lo tanto, sólo tiene que generar el código HTML de sus datos JSON y llamar a la función init-después.

No es tan difícil, ¿verdad?

Answer 2

yeah @SLaks tiene razón. nada demasiado loco aquí. Tendrás 2 variables currentPageNumber y 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

Uso THIS o THAT plugin. Ambos son complementos de paginación html fáciles. Pon todo en el html a la vez y paginate con uno de esos.

Answer 4

Añadir dos nuevas entradas ocultas

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

A continuación añadir un div vacío para crear controles de paginación

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