▷ Menú con Números de Página en Javascript [SOLUCIONADO]

En el mundo de la programación web, la paginación es un elemento esencial cuando se trata de mejorar la experiencia del usuario en su sitio web. La aplicación correcta de la paginación, que también es conocida como menú con números de página, puede mejorar significativamente las visitas, la retención y satisfacción del usuario. En esta guía, aprenderás a implementar un menú de paginación en Javascript.

Antes de comenzar, es fundamental entender qué es Javascript. Javascript es uno de los tres lenguajes centrales de la World Wide Web, junto con HTML y CSS. Es un lenguaje de programación que interactúa con los elementos de una página web y permite la creación de funciones dinámicas e interactivas.

Para desarrollar un menú con números de página, puedes usar un array como un mecanismo simple para la paginación. A continuación, te presento un procedimiento básico para lograrlo.

 var current_page = 1;
 var records_per_page = 3; // Número de registros por página.

 var objJson = [
     { "Name": "John", "Age": "19" },
     { "Name": "George", "Age": "25" },
     // Puedes agregar más datos...
     ...
 ];

 function prevPage()
 {
     if (current_page > 1) {
         current_page--;
         changePage(current_page);
     }
 }

 function nextPage()
 {
     if (current_page < numPages()) {
         current_page++;
         changePage(current_page);
     }
 }

En el código anterior, puedes observar una serie de variables y métodos que son esenciales para la creación de un menú con números de página. La variable current_page regula la página actual, mientras que la variable records_per_page establece un límite para el número de registros por página.

Además, al final puedes ver dos funciones, prevPage() y nextPage(), que se encargan de gestionar la navegación entre las diferentes páginas. El botón de "Anterior" y "Siguiente" cambiarán la página y volverán a dibujar la lista con el contenido de la página actual.

Ahora, es momento de hablar acerca del método changePage() y añadirlo al código anterior. Este método es fundamental para la interacción del usuario con las páginas. Veamos a continuación cómo implementarlo.

 function changePage(page)
 {
     var btn_next = document.getElementById("btn_next");
     var btn_prev = document.getElementById("btn_prev");
     var listing_table = document.getElementById("listingTable");
     var page_span = document.getElementById("page");

     if(page < 1) page = 1;
     if(page > numPages()) page = numPages();

     listing_table.innerHTML = "";

     for(var i = (page-1) * records_per_page; i < (page * records_per_page); i++)
     {
         listing_table.innerHTML += objJson[i].Name + "<br>";
     }

     page_span.innerHTML = page;
     
     if(page == 1)
     {
         btn_prev.style.visibility = "hidden";
     }
     else
     {
         btn_prev.style.visibility = "visible";
     }

     if(page == numPages())
     {
         btn_next.style.visibility = "hidden";
     }
     else
     {
         btn_next.style.visibility = "visible";
     }
 }

 function numPages()
 {
     return Math.ceil(objJson.length / records_per_page);
 }

Con este código, tienes un menú de paginación funcional en JavaScript. Puedes adaptarlo a tus necesidades, y recuerda siempre probar tu código en un ambiente controlado antes de implementarlo en tu página web.