3-logica

 

Explicación:

  1. PHP:

    • Se define un arreglo $carpetas con tres elementos.
    • Variables de paginación $page, $limit, $links, $totalFilas, $last, $start, $end se calculan en función de los datos.
    • Se utiliza array_slice para obtener los datos paginados que se mostrarán en la tabla.

  2. HTML:

    • Se define la estructura de la tabla y se llenan los datos utilizando PHP.
    • Se genera la paginación con botones "Atras" y "Siguiente", y números de página. Los botones se deshabilitan según sea necesario.

  3. JavaScript:

    • La función asignarCarpeta muestra una alerta con el ID de la carpeta asignada.

El código genera una tabla paginada con los datos de un arreglo, permite la navegación entre páginas y muestra alertas al asignar una carpeta


<?php
// Arreglo de datos de carpetas
$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
    ]
];

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
$links = 10;
$totalFilas = count($carpetas);
$last = ceil($totalFilas / $limit);
$start = (($page - $links) > 0) ? $page - $links : 1;
$end = (($page + $links) < $last) ? $page + $links : $last;
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario Modal</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">
        <?php
        $startFrom = ($page - 1) * $limit;
        $paginatedData = array_slice($carpetas, $startFrom, $limit);
        foreach ($paginatedData as $carpeta) {
            echo "<tr>
                    <td>" . htmlspecialchars($carpeta['id']) . "</td>
                    <td>" . htmlspecialchars($carpeta['carpeta']) . "</td>
                    <td>" . htmlspecialchars($carpeta['procedimiento']) . "</td>
                    <td><button class='btn btn-primary' onclick='asignarCarpeta(" . htmlspecialchars($carpeta['id']) . ")'>Asignar</button></td>
                    <td>" . htmlspecialchars($carpeta['registro']) . "</td>
                    <td>" . htmlspecialchars($carpeta['fecha_asignacion']) . "</td>
                    <td>" . htmlspecialchars($carpeta['area']) . "</td>
                    <td>" . htmlspecialchars($carpeta['asignado']) . "</td>
                    <td>" . htmlspecialchars($carpeta['motivo']) . "</td>
                    <td>" . ($carpeta['activo'] ? "asignado" : "entregado") . "</td>
                </tr>";
        }
        ?>
        </tbody>
    </table>
    <ul class="pagination">
        <?php
        $prevClass = ($page == 1) ? "disabled" : "";
        echo "<li class='page-item $prevClass'><a class='page-link $prevClass' href='?page=" . ($page - 1) . "&limit=$limit'>Atras</a></li>";

        if ($start > 1) {
            echo "<li class='page-item'><a class='page-link' href='?page=1&limit=$limit'>1</a></li>";
            echo "<li class='disabled'><span class='page-link'>...</span></li>";
        }

        for ($i = $start; $i <= $end; $i++) {
            $activeClass = ($page == $i) ? "active" : "";
            echo "<li class='page-item $activeClass'><a class='page-link' href='?page=$i&limit=$limit'>$i</a></li>";
        }

        if ($end < $last) {
            echo "<li class='disabled'><span class='page-link'>...</span></li>";
            echo "<li class='page-item'><a class='page-link' href='?page=$last&limit=$limit'>$last</a></li>";
        }

        $nextClass = ($page == $last) ? "disabled" : "";
        echo "<li class='page-item $nextClass'><a class='page-link $nextClass' href='?page=" . ($page + 1) . "&limit=$limit'>Siguiente</a></li>";
        ?>
    </ul>
</div>
<script>
    function asignarCarpeta(id) {
        alert('Carpeta ' + id + ' asignada');
    }
</script>
</body>
</html>

Comentarios

Publicar un comentario