Cuando tienes tareas repetitivas, lo mejor es crear una función, no solo te ayuda a reducir código, sino también a simplificar la lógica. En tu caso:
Todos los elementos del menú son li
y deben tener una clase específica. Dentro hay otra etiqueta, puede ser enlace a
o span
y también se le debe asignar clase y texto; entonces solo debes crear una función que reciba esos parámetros para crear las etiquetas correspondientes, con sus atributos, y devolver el elemento.
Finalmente, si creas todos los elementos en orden (botón anterior, botones de números de página y botón siguiente), simplemente los agregas con .appendChild()
y evitas complicar la lógica, ya no es necesario detectar elementos anteriores ni el uso de .insertBefore()
.
Una mejora en este fragmento de código es que puedes especificar el elemento que aparecerá activo al crear el menú, solo agregando un parámetro a la función showPageMenu()
y una asignación ternaria para verificar si se debe asignar la clase active
.
/**
* Crear enlaces de paginación
* @param (string) className Clase para elemento de lista (li)
* @param (string) insideTag Etiqueta para elemento interno (enlace o span)
* @param (string) insideClass Clase para elemento interno
* @param (string) text Texto de elemento interno
* @returns HTMLElement Elemento de lista
*/
const menuItem = (className, insideTag, insideClass, text) => {
// Crear elemento de lista y asignar clase
let li = document.createElement('li');
li.className = className;
// Crear elemento interno, asignar clase y contenido
let inTag = document.createElement(insideTag);
inTag.className = insideClass;
inTag.textContent = text;
// Agregar elemento interno
li.appendChild(inTag);
// Devolver elemento de lista
return li;
}
// Recibir un segundo parámetro para establecer enlace activo
const showPagMenu = (pages, current) => {
// Asegurar que tenemos un valor adecuado
if(!current || current < 1) {
current = 1;
} else if(current > pages) {
current = pages;
}
// main Ul
let ulObj = document.createElement('ul');
ulObj.className='pagination pagination-sm';
// Crear enlace "Anterior" y agregar a lista
ulObj.appendChild(menuItem('page-item', 'a', 'page-link', 'Anterior'));
// Páginas
for(let i = 1; i <= pages; i++) {
// ¿Es la página activa?
let active = (current == i) ? ' active' : '';
ulObj.appendChild(menuItem('page-item' + active, 'span', 'page-link', i));
}
// Siguiente
ulObj.appendChild(menuItem('page-item', 'a', 'page-link', 'Siguiente'));
return ulObj;
}
// Crear enlaces de página y activar el primer elemento (sin parámetro)
document.body.appendChild(showPagMenu(5));
// Crear enlaces de página y activar el segundo elemento
document.body.appendChild(showPagMenu(3, 2));
// Crear enlaces de página y activar el último elemento, incluso con parámetro inválido
document.body.appendChild(showPagMenu(8, 10));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
Ya te tocará aplicar otras mejoras como deshabilitar el botón "Anterior" cuando la página activa es la primera o el botón "Siguiente" cuando la página activa es la última.