Esta herramienta de paginación en JavaScript ofrece una solución adaptable para implementar controles de navegación de páginas en interfaces web. El código es modular y permite personalización según los requisitos del proyecto.

Función para generar controles de paginación

La siguiente función crea dinámicamente el HTML para los botones de naevgación, basándose en parámetros de configuración.

/**
 * Genera controles de paginación.
 * @param {number} itemsPerPage - Elementos por página.
 * @param {number} currentPage - Página actual.
 * @param {number} totalPages - Total de páginas.
 * @param {string} callbackFunction - Nombre de la función de retrollamada.
 * @returns {string} HTML de los controles.
 */
function crearPaginador(itemsPerPage, currentPage, totalPages, callbackFunction) {
    const maxVisible = 7; // Cantidad máxima de números de página visibles
    let startPage = 1;
    let endPage = totalPages;
    
    if (totalPages > maxVisible) {
        const halfRange = Math.floor(maxVisible / 2);
        if (currentPage > totalPages - halfRange) {
            startPage = totalPages - maxVisible + 1;
            endPage = totalPages;
        } else if (currentPage <= halfRange + 1) {
            startPage = 1;
            endPage = maxVisible;
        } else {
            startPage = currentPage - halfRange;
            endPage = currentPage + halfRange;
        }
    }
    
    let paginationHTML = `<div class="pagination-wrapper"><span class="page-info">Página <strong>${currentPage}</strong> de <strong>${totalPages}</strong>, ${itemsPerPage} elementos por página</span>`;
    
    if (currentPage > 1) {
        paginationHTML += `<a class="page-link" onclick="${callbackFunction}(1, ${itemsPerPage})">Primera</a>`;
        paginationHTML += `<a class="page-link" onclick="${callbackFunction}(${currentPage - 1}, ${itemsPerPage})">Anterior</a>`;
    }
    
    for (let pageNum = startPage; pageNum <= endPage; pageNum++) {
        if (pageNum === currentPage) {
            paginationHTML += `<a class="active-page">${pageNum}</a>`;
        } else {
            paginationHTML += `<a class="page-link" onclick="${callbackFunction}(${pageNum}, ${itemsPerPage})" title="Página ${pageNum}">${pageNum}</a>`;
        }
    }
    
    if (currentPage < totalPages) {
        paginationHTML += `<a class="page-link" onclick="${callbackFunction}(${currentPage + 1}, ${itemsPerPage})">Siguiente</a>`;
        paginationHTML += `<a class="page-link" onclick="${callbackFunction}(${totalPages}, ${itemsPerPage})">Última</a>`;
    }
    
    paginationHTML += `</div>`;
    return paginationHTML;
}

Estructura HTML del contenedor

Define un área en el documento donde se inyectarán los controles de paginación.

<div class="pagination-container">
    <div id="pagination-controls"></div>
</div>

Estilos CSS para los controles

Estilos básicos para una apariencia coherente y responsive.

.page-link {
    color: #333;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-left: -1px;
    text-align: center;
    cursor: pointer;
}
.page-link:hover {
    background-color: #f5f5f5;
}
.active-page {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    display: inline-block;
    cursor: default;
}
.page-info {
    margin-right: 10px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    display: inline-block;
    color: #555;
}
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

Integración con llamadas AJAX

Ejemplo de cómo utilizar la función de paginación con una solicitud AJAX para obtener datos del servidor.

function fetchPageData(pageNum, itemsPerPage) {
    $.ajax({
        contentType: "application/json; charset=utf-8",
        url: `?page=${pageNum}&limit=${itemsPerPage}`,
        type: "POST",
        dataType: "json",
        success: function(response) {
            if (response) {
                const calculatedTotalPages = Math.ceil(response.totalItems / itemsPerPage);
                $('#pagination-controls').html(crearPaginador(itemsPerPage, pageNum, calculatedTotalPages, 'fetchPageData'));
            }
        }
    });
}

La función de retrollamada especificada en el último parámetro de crearPaginador debe coincidir con el nombre de la función que maneja la carga de datos, como se muestra en el ejemplo.