Paginación simple en JavaScript

Las páginas web usan con frecuencia la paginación, que es el proceso de romper el contenido en múltiples páginas. Permite a los usuarios navegar fácilmente a través de grandes cantidades de contenido, lo que lo hace más manejable y menos abrumador. Mejora los tiempos de carga generales de un sitio web. La paginación también facilita a los desarrolladores administrar y recuperar datos de bases de datos, especialmente cuando se trata de grandes cantidades de datos.

Esta publicación describirá el procedimiento para crear paginación en JavaScript.

Cómo crear una paginación simple en JavaScript?

La idea de paginación de JavaScript usa el "Próximo" y "Anterior"Botones o enlaces para navegar entre páginas. El objetivo fundamental de la paginación es permitir a los usuarios navegar rápidamente a través del contenido haciendo clic en enlaces o botones.

Veamos el ejemplo para comprender el proceso de crear paginación simple en JavaScript. Tomará tres pasos.

Paso 1: Agregue el contenido en el archivo HTML
Primero, cree el contenido que desea mostrar en la página web. Aquí, crearemos una lista ordenada usando un HTML "olio"Etiqueta que almacena las listas de los lenguajes de programación, las frutas, el conteo y los días de la semana. Todas estas listas se imprimirán en diferentes páginas utilizando la técnica de paginación:

1. Html


2. CSS


3. Javascript


4. Nodo JS


5. Java


6. C++


7. C#


8. Pitón


9. Sql


10. Visual Basic


11. Manzana


12. Banana


13. Uvas


14. Naranja


15. Cereza


16. Pera


17. mango


18. Fresa


19. Sandía


20. Granada


21. Uno


22. Dos


23. Tres


24. Cuatro


25. Cinco


26. Seis


27. Siete


28. Ocho


29. Nueve


30. Diez


31. Lunes


32. Martes


33. Miércoles


34. Jueves


35. Viernes


36. Sábado


37. Domingo

Paso 2: diseñe el contenido y los botones con CSS
Luego, diseñe el contenido, los botones y las acciones realizadas por los botones, como cambiar el color en el flotante y así sucesivamente.

La clase CSS para diseñar el "próximo"(>) Y"anterior"(<) buttons are as follows:

.paginación
Ancho: Calc (100% - 2Rem);
Pantalla: Flex;
Alineación de ítems: Centro;
Posición: Absoluto;
Abajo: 0;
relleno: 1rem 0;
Justify-Content: Center;

Para diseñar los botones dinámicos "1, 2, 3 .. ", Use el siguiente código CSS:

.número de paginación,
.Page-Buttons
tamaño de fuente: 1.1rem;
Color de fondo: LightBlue;
borde: ninguno;
Margen: 0.25rem 0.25rem;
cursor: puntero;
Altura: 2.5rem;
Ancho: 2.5rem;
Radio fronterizo: .2rem;

Para cambiar el color en el flotador de los botones, use la clase dada:

.número de paginación: flotante,
.Page-Buttons: no (.Desactivado): Hover
Antecedentes: LightBlue;

Para los botones activos, configure los diferentes colores del botón utilizando las propiedades de CSS a continuación:

.número de paginación.activo
Color: #fff;
Antecedentes: #0C313F;

Esta clase CSS se utiliza para diseñar la lista para mostrar en la página web:

.Olstyle
Pantalla: bloque en línea;
text-align: izquierda;

Cuando sea necesario ocultar cualquier botón o cualquier contenido, use la clase CSS a continuación:

.oculto
Pantalla: ninguno;

Paso 3: Crear paginación simple usando JavaScript
Ahora, en el archivo JavaScript, use el siguiente código para crear un contenedor para la paginación:

<

>

En el siguiente fragmento de arriba:

• Primero, cree un contenedor para los botones de paginación utilizando el "div"Elemento y asignar una clase CSS"paginación"Por diseñar los botones.
• Crear dos botones ("Próximo" y "Anterior") Como botones de flecha usando el"& LT" y "& gt".
• Cree un DIV para los botones dinámicos basados ​​en la distribución de contenido.

Aquí, declaramos algunas variables para establecer el contenido de paginación:

const paginationlimit = 10;
const pageCount = matemáticas.techo (listitems.longitud / paginationlimit);
Sea CurrentPage = 1;

• Primero, divida los datos o el contenido en páginas. Puede hacer esto limitando el número de elementos por página. Aquí, establecemos el límite de la página en "10", lo que significa que solo se mostrarán 10 elementos en cada página.
• Divida el número total de artículos "listados.longitud" por el "PaginationLimit"Y redondear al número completo más alto utilizando el"Matemáticas.fortificar techo()"Método para obtener el PageCount.
• Establezca la página actual como "1".

Ahora, cree una variable que obtenga las referencias de los números de página, los botones y la lista de contenido utilizando sus IDS asignados:

Const paginationnumbers = documento.getElementById ("Nombre de página");
const nextButton = documento.GetElementById ("Next-Button");
const prevbutton = documento.getElementById ("anterior-botton");
const pagineList = documento.getElementById ("List");
Const listems = PaginedList.QuerySelectorAll ("li");

Definir una función para deshabilitar el botón cuando la lista está al principio o al final. Esto significa deshabilitar el "Siguiente (>)Botón "Cuando se abre la última página, de manera similar, deshabilitando el"anterior (<)"Botón cuando se abre la primera página:

const disableButton = (botón) =>
botón.Lista de clase.agregar ("deshabilitado");
botón.setAttribute ("discapacitado", true);
;

Del mismo modo, deshabilitar el botón, para habilitar los botones de paginación, use la siguiente función:

const EnableButton = (Button) =>
botón.Lista de clase.eliminar ("deshabilitado");
botón.RemoveAttribute ("Discapaced");
;

Aquí, manejaremos el estado de los botones de página, cuando se habilitan o cuando se desactiven:

constaPageButtonSstatus = () =>
if (currentPage === 1)
DisableButton (Prevbutton);
demás
EnableButton (Prevbutton);

if (pageCount === CurrentPage)
DisableButton (NextButton);
demás
EnableButton (NextButton);

;

Cree botones dinámicos de acuerdo con la longitud del contenido y agréguelos a un contenedor de paginación:

const appendPageNumber = (index) =>
const pagenumber = documento.createElement ("botón");
número de página.className = "Pagination-Number";
número de página.innerhtml = index;
número de página.setAttribute ("Page-Index", índice);
Paginationnumbers.AppendChild (PageNumber);
;
const getPaginationNumbers = () =>
para (deja i = 1; i
documento.QuerySelectorall (".número de paginación ").foreach ((botón) =>
botón.Lista de clase.eliminar ("activo");
const pageIndex = número (botón.getAttribute ("Page-Index"));
if (pageIndex == CurrentPage)
botón.Lista de clase.agregar ("activo");

);
;

Agregue el código anterior a la función dada para que cada vez que se establezca una nueva página, se actualiza el número de página activo:

const setCurrentPage = (Pagenum) =>
CurrentPage = Pagenum;
HandleActivePageNumber ();
HandlePageButtonSstatus ();
const prevrange = (pageno - 1) * paginationlimit;
const currange = pagenum * paginationLimit;
listados.foreach ((item, index) =>
artículo.Lista de clase.agregar ("oculto");
if (index> = prevole && index < currRange)
artículo.Lista de clase.eliminar ("oculto");

);
;

Cuando se haga clic en el botón Número de página, use el oyente del evento de clic para llamar al "setCurrentPage" función. Para hacer clic en el botón anterior, mueva la página anterior restando el "1" desde el "página actual", Y para hacer clic en el botón Siguiente, muévase a la página siguiente agregando"1" en el página actual":

ventana.addEventListener ("Load", () =>
getpaginationnumbers ();
setCurrentPage (1);
Prevbutton.addEventListener ("Click", () =>
setCurrentPage (CurrentPage - 1);
);
siguiente botón.addEventListener ("Click", () =>
setCurrentPage (CurrentPage + 1);
);
documento.QuerySelectorall (".número de paginación ").foreach ((botón) =>
const pageIndex = número (botón.getAttribute ("Page-Index"));
if (pageIndex)
botón.addEventListener ("Click", () =>
setCurrentPage (PageIndex);
);

);
);

Producción

Eso se trata de la paginación en JavaScript.

Conclusión

Para crear paginación simple en JavaScript, primero, cree un contenedor para el elemento de paginación y la lista de elementos que se paginarán. Divida la lista de elementos en grupos más pequeños, o "páginas", Basado en el número deseado de elementos por página. Crea botones o enlaces para navegar entre las páginas y agrégalos al contenedor de paginación. Agregue los oyentes de eventos a los botones para actualizar los elementos que se muestran cuando se haga clic en. Use JavaScript para ocultar los elementos que no están en la página que se muestran actualmente y para mostrar los elementos que están. Estilizar el elemento de paginación y los botones como se desee. Esta publicación describió el procedimiento para crear paginación en JavaScript.