PAGINADOR

 <!DOCTYPE html>

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla con Paginación</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .disabled {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
</head>
<body>
<div class="container py-1" style="background-color: white;">
    <h1>Tabla de Carpetas</h1>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>Carpeta</th>
            <th>Procedimiento</th>
            <th>Acción</th>
            <th>Registro</th>
            <th>Fecha Asignación</th>
            <th>Área</th>
            <th>Asignado</th>
            <th>Motivo</th>
            <th>Estado</th>
        </tr>
        </thead>
        <tbody id="tablaCarpetas"></tbody>
    </table>
    <ul class="pagination" id="paginacion"></ul>
</div>
<script>
    // Arreglo de datos de ejemplo para las carpetas
    const carpetas = [
        {
            'id': 1,
            'carpeta': 'Carpeta 1',
            'procedimiento': 'Procedimiento 1',
            'registro': 'Registro 1',
            'fecha_asignacion': '2023-06-20',
            'area': 'Área 1',
            'asignado': 'Juan Perez',
            'motivo': 'Motivo 1',
            'activo': true
        },
        {
            'id': 2,
            'carpeta': 'Carpeta 2',
            'procedimiento': 'Procedimiento 2',
            'registro': 'Registro 2',
            'fecha_asignacion': '2023-06-21',
            'area': 'Área 2',
            'asignado': 'Maria Gomez',
            'motivo': 'Motivo 2',
            'activo': false
        },
        {
            'id': 3,
            'carpeta': 'Carpeta 3',
            'procedimiento': 'Procedimiento 3',
            'registro': 'Registro 3',
            'fecha_asignacion': '2023-06-22',
            'area': 'Área 3',
            'asignado': 'Pedro Martinez',
            'motivo': 'Motivo 3',
            'activo': true
        }
    ];

    const filasPorPagina = 5;  // Número de filas por página
    let paginaActual = 1;  // Página actual

    // Función para mostrar la página especificada
    function mostrarPagina(pagina) {
        const inicio = (pagina - 1) * filasPorPagina;  // Índice de inicio para la página actual
        const fin = inicio + filasPorPagina;  // Índice de fin para la página actual
        const cuerpoTabla = document.getElementById('tablaCarpetas');
        cuerpoTabla.innerHTML = '';  // Limpiar el cuerpo de la tabla

        // Obtener los datos paginados y agregarlos a la tabla
        const datosPaginados = carpetas.slice(inicio, fin);
        datosPaginados.forEach(carpeta => {
            const fila = `<tr>
                <td>${carpeta.id}</td>
                <td>${carpeta.carpeta}</td>
                <td>${carpeta.procedimiento}</td>
                <td><button class='btn btn-primary' onclick='asignarCarpeta(${carpeta.id})'>Asignar</button></td>
                <td>${carpeta.registro}</td>
                <td>${carpeta.fecha_asignacion}</td>
                <td>${carpeta.area}</td>
                <td>${carpeta.asignado}</td>
                <td>${carpeta.motivo}</td>
                <td>${carpeta.activo ? "asignado" : "entregado"}</td>
            </tr>`;
            cuerpoTabla.innerHTML += fila;
        });

        // Actualizar la paginación
        const paginacion = document.getElementById('paginacion');
        paginacion.innerHTML = '';  // Limpiar la paginación

        const totalPaginas = Math.ceil(carpetas.length / filasPorPagina);

        // Botón de página anterior
        const clasePrev = (pagina === 1) ? "disabled" : "";
        paginacion.innerHTML += `<li class='page-item ${clasePrev}'><a class='page-link' href='#' onclick='cambiarPagina(${pagina - 1})'>Atrás</a></li>`;

        // Botones de páginas
        for (let i = 1; i <= totalPaginas; i++) {
            const claseActiva = (pagina === i) ? "active" : "";
            paginacion.innerHTML += `<li class='page-item ${claseActiva}'><a class='page-link' href='#' onclick='cambiarPagina(${i})'>${i}</a></li>`;
        }

        // Botón de página siguiente
        const claseNext = (pagina === totalPaginas) ? "disabled" : "";
        paginacion.innerHTML += `<li class='page-item ${claseNext}'><a class='page-link' href='#' onclick='cambiarPagina(${pagina + 1})'>Siguiente</a></li>`;
    }

    // Función para cambiar la página actual
    function cambiarPagina(pagina) {
        const totalPaginas = Math.ceil(carpetas.length / filasPorPagina);
        if (pagina < 1 || pagina > totalPaginas) return;
        paginaActual = pagina;
        mostrarPagina(paginaActual);
    }

    // Función para asignar una carpeta (muestra una alerta en este caso)
    function asignarCarpeta(id) {
        alert('Carpeta ' + id + ' asignada');
    }

    // Mostrar la primera página al cargar el documento
    document.addEventListener('DOMContentLoaded', function() {
        mostrarPagina(paginaActual);
    });
</script>
</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Normalizar valores

 Para asegurarte de que todos los registros en la columna juez que coinciden con "LIC. ERICK SERRANO" (y sus variantes) se cambien exactamente a "LIC. ERICK SERRANO", puedes utilizar una consulta SQL que normalice esos valores. Esto eliminará las diferencias de formato que puedan estar causando que se cuenten como registros distintos. DELETE FROM carpetas; UPDATE control SET estatus = 'TRÁMITE' ; UPDATE `carpetas` SET `juez` = ' LIC. PATRICIA LOZANO ' WHERE `juez` LIKE '% PATRICIA LOZANO %'; UPDATE `carpetas` SET `juez` = 'LIC. ERICK SERRANO' WHERE `juez` LIKE '%ERICK SERRANO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'CON DETENIDO' WHERE `tipo_solicitud` LIKE '%CON DETENIDO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE '%ORDEN DE APRENSION%'; UPDATE `control` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE...
Leer más

NORMALIZAR TABLA-audiencia_intervinientes

 Para normalizar las columnas relacionadas con los intervinientes en la tabla audiencia , puedes seguir un proceso similar al que hicimos con los delitos. Vamos a crear una nueva tabla llamada audiencia_intervinientes , donde cada interviniente estará asociado a una audiencia con un tipo que indica qué rol (asistente, víctima, asesor, etc.) desempeña en esa audiencia. 1. Crear la nueva tabla audiencia_intervinientes Esta tabla contendrá una columna nombre , una columna tipo que identificará el tipo de interviniente, y una clave foránea que haga referencia a la tabla audiencia . CREATE TABLE audiencia_intervinientes (     id_interviniente INT AUTO_INCREMENT PRIMARY KEY,     id_audiencia INT NOT NULL,     nombre VARCHAR(150) NOT NULL,     tipo VARCHAR(50) NOT NULL,     FOREIGN KEY (id_audiencia) REFERENCES audiencia(id_audiencia) ON DELETE CASCADE ); 2. Insertar los intervinientes antiguos en la nueva tabla Ahora, vamos a mover los...
Leer más

Listar audiencias

  <!-- Listar Audiencias -->     <h4> Audiencias </h4>     <table class = "table" >         <thead>             <tr>                 <th> ID </th>                 <th> Folio_S </th>                 <th> Carpeta </th>                 <th> Nombre </th>                 <th> Fecha </th>                 <th> Video </th>             </tr>         </thead>         <tbody>             <?php             $audienciasCtr = new Contr...
Leer más