Esta es el arreglo más completa que te podemos dar, pero obsérvala pausadamente y valora si se adapta a tu trabajo.
Solución:
Lo que está buscando se llama “paginación” y hay (como siempre) un complemento jQuery que hace el trabajo por usted:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Descarguelo aqui)
Editar: Como parece que no puede hacerlo funcionar, aquí hay una forma (de varias diferentes) de cómo puede usar el complemento.
Paso 1: Genere marcado a partir de sus datos JSON como el siguiente:
La idea es copiar el registro respectivo al div de visualización al hacer clic en un enlace de página. Por lo tanto, el complemento ofrece una función de devolución de llamada pageSelect. 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 significaría que tiene una página por registro. Si desea mostrar varios 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!
);
Entonces, solo tiene que generar el marcado HTML a partir de sus datos JSON y luego llamar a la función de inicio.
No es tan difícil, ¿verdad?
sí, @SLaks tiene razón. nada demasiado loco aquí. Tendrá 2 variables currentPageNumber y lastPageNumber.
$("div.paginator").append("prev");
$("div.paginator").append("1");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++)
$("div.paginator").append(""+ x +"");
$("div.paginator").append(""+ lastPageNumber +"");
$("div.paginator").append("next");
// 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
Si piensas que te ha sido de ayuda este post, sería de mucha ayuda si lo compartes con el resto desarrolladores y nos ayudes a difundir nuestro contenido.