2

Esta es mi estructura HTML, un diseño simple:

.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.table-header {
    padding: 2em;
}
.search-bar {
    position: relative;
    width: 34%;
}
input.go-seeker {
    border-radius: 1em;
    right: 0;
    transition: all .3s ease-in-out;
    width: 50%;
    position: absolute;
    padding: 1.2em;
    height: 2.4em;
    border: 1px solid #363535;
    background-color: #333;
    outline: none;
    color: #999898;
}
input.go-seeker:focus {
    width: 70%;
    right: 0em;
}
button.btn-search {
    display: block !important;
    background-color: transparent;
    border-radius: 50%;
    height: 2em;
    right: 2px;
    top: 0.3em;
    transition: all .3s ease-in-out;
    width: 2em;
    border: none;
    position: absolute;
    outline: none;
}
button.btn-search:before {
    content: "";
    display: inline-block;
    background-size: cover;
    position: relative;
    top: 4px;
    width: 25px;
    height: 25px;
    background-image: url(../img/website/svg/search.svg);
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.bootgrid-table {
    table-layout: fixed;
}
table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}
th {
    font-weight: 100;
    text-align: left;
}
.table td {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.table>tbody>tr:hover {
    background-color: #f5f5f5;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    /*border-top: 1px solid #ddd;*/
    border: 1px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    /*border-top: 0;*/
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

span#add,
span.view_data,
span.edit_data {
    cursor: pointer;
}

i.icon-delete:hover,
i.icon-add-new:hover,
i.icon-view:hover,
i.icon-edit:hover {
    filter: brightness(40%);
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
}
.pagination>li>a.active {
    background-color: #f7f7f7;
    cursor: not-allowed;
}
    <div class="bootgrid"> 
        <div class="flex justify-between table-header">
            <div class="flex items-center">
                <div class="actions btn-group">
                    <label>
                        <select id="amount_show" name="amount_show">
                            <option value="10" selected="">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                            entries
                    </label>
                </div>
                <div>
                    <select id="customer" name="customer">
                        <option value="1">Google</option>
                        <option value="2">StackOverflow</option>
                        <option value="3">PayPal</option>
                    </select>
                </div>
                <div>
                    <input type="datetime" name="">
                </div>
                <div>
                    <input type="search" name="">
                </div>
            </div>
        </div>
        <table id="data-table" class="table bootgrid-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>ID Customer</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Rol</th>
                    <th>Register Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="tbody-insert"></tbody>
        </table>
    </div>  

Los datos se imprimen correctamente en PHP, el problema viene del código ajax que no me muestra los resultados en la paginación:

$stmt = $con->prepare("SELECT id_user,
                                id_customer,
                                name,
                                email,
                                rol,
                                register_date
                            FROM users
                            ORDER BY id_user DESC");
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($id_user, $id_customer, $name, $email, $rol, $register_date);
while($stmt->fetch()) {
    $data['users'][] = [
        'id_user' => $id_user,
        'id_customer' => $id_customer,
        'email' => $email,
        'rol' => $rol,
        'register_date' => $register_date
    ];
}
$stmt->close();
echo json_encode($data);

La realización de un console.log (data); me muestra que los datos también se están llamando o recibiendo correctamente, pero no muestra esos resultados:

introducir la descripción de la imagen aquí

$(function() { 
    $.ajax({
        type: "GET",
        url: "ajax.php",
        dataType: "json",
    })
    .done(function(data) {
        console.log(data);
        tableRows = '';
        for (let i = 0; i < data.length; i++) {
            tableRows += `
                <tr>
                    <td>${data[i].id_user}</td>
                    <td>${data[i].id_customer}</td>
                    <td>${data[i].name}</td>
                    <td>${data[i].email}</td>
                    <td>${data[i].rol}</td>
                    <td>${data[i].register_date}</td>
                    <td>Edit<td>
                </tr>`;
        }
        $("#tbody-insert").html(tableRows);
    })
});

Mi idea es crear una paginación con varios filtros; por cantidad de resultados, por fecha, por filtro de cliente, por filtro de rol y, un motor de búsqueda.

Estoy migrando a JSON ya que supieron mencionarme que *desde PHP solo envíe datos en formato JSON, que me ayudará a reducir significativamente el contenido de cada petición y, por consiguiente, el tiempo de respuesta`

Basado a la siguiente pregunta:

3
  • No veo que estes paginando ni en JS, ni en PHP, por lo que diría que no hay error porque directamente no lo estas haciendo. ¿Queres saber como se podría paginar? Si la idea es "reducir significativamente el contenido" te diría que tenes que paginar en PHP
    – Marcos
    Commented el 24 abr. 2021 a las 20:13
  • @Marcos En realidad si, saber cómo hacerlo pero en Ajax ya tenía un ejemplo funcionando pero recomendaron mostrar datos en json y no en html entiendo que falta código en php para realizarlo pero como ya no es en html ya no podría generarlo con PHP sino solo datos en json si tenía este código: jsfiddle.net/ycma3j0k estaba reducido completamente se podría decir porque estaba todo separado, es decir el archivo php que generaba los datos de la paginacion y, en el Ajax / jQuery solo eran pocas líneas de código y, funcionaba perfectamente, ahora lo estoy intentando en json
    – J. Mick
    Commented el 24 abr. 2021 a las 21:38
  • @Marcos pero sin éxito, no tengo mucho conocimiento en jQuery/Javascript pero lo intento tomando ejemplos que tengo o que encuentro.
    – J. Mick
    Commented el 24 abr. 2021 a las 21:39

1 respuesta 1

2

Tomando como punto de partida el código de tu comentario (el cual si tiene paginación) las modificaciones que podrías realizar son:

  • La generación del HTML de páginas la realizamos con Javascript.
    Para poder hacer esto necesitamos enviar dentro del JSON de respuesta la página actual (ej: current_page), el total de registros (ej: total_records) y el la cantidad de registros por página (ej: records_by_page).

  • Para obtener el total de registros usamos la función COUNT(*) de MySQL, que es mucho mas eficiente que devolver todos los registros para saber cuantos son.

Ejemplo:

PHP

<?php

// Controlamos los datos recibidos para paginar
$page = isset($_GET['page']) ? (int) $_GET['page'] : 1;
if ($page < 1) $page = 1;
$records_by_page = isset($_GET['amount_show']) ? (int) $_GET['amount_show'] : 10;
if ($records_by_page < 10) $records_by_page = 10;

$limit_from = ($page - 1) * $records_by_page;

// Inicializamos el arreglo de respuesta.
$response = [
    'records' => [],
    'current_page' => $page,
    'records_by_page' => $records_by_page,
    'total_records' => 0,
];

// Obtenemos el total de registros
$info = $con->query("SELECT COUNT(*) AS total FROM users")->fetch_assoc();
$response['total_records'] = $info['total'];

// Obtenemos los registros para la "pagina actual"
$stmt = $con->prepare("SELECT 
        id_user,
        id_customer,
        name,
        email,
        rol,
        register_date
    FROM users
    ORDER BY id_user DESC
    LIMIT $limit_from, $records_by_page");

$stmt->execute();
$result = $stmt->get_result();
while($user = $result->fetch_assoc()) {
    $response['records'][] = $user;
}

// Imprimimos la respuesta
header('Content-Type: application/json');
echo json_encode($response);

HTML

<div class="bootgrid"> 
    <div class="flex justify-between table-header">
        <div class="flex items-center">
            <div class="actions btn-group">
                <label>
                    <select id="amount_show" name="amount_show">
                        <option value="10" selected="">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                        entries
                </label>
            </div>
            <div>
                <select id="customer" name="customer">
                    <option value="1">Google</option>
                    <option value="2">StackOverflow</option>
                    <option value="3">PayPal</option>
                </select>
            </div>
            <div>
                <input type="datetime" name="">
            </div>
            <div>
                <input type="search" name="">
            </div>
        </div>
    </div>
    <table id="data-table" class="table bootgrid-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>ID Customer</th>
                <th>Name</th>
                <th>Email</th>
                <th>Rol</th>
                <th>Register Date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="tbody-insert"></tbody>
        <tfoot>
          <tr>
            <td colspan="7" id="tfoot-paging"></td>
          </tr>
        </tfoot>
    </table>
</div>

Javascript


    $(function() {
      // Click en el paginado
      $(document).on('click', '.pagination li a', function(evt) {
        evt.preventDefault();
        ajaxLoad($(this).data('page'));
      });

      // Cambio de valor
      $('#amount_show').change(function(evt) {
        evt.preventDefault();
        ajaxLoad(1); // ACA volvemos a la pagina 1 porque la config cambió
      });

      ajaxLoad(1);

      // Función que busca los registros
      function ajaxLoad(page) {

        let endpoint = "ajax.php";
        $.ajax({
            type: "GET",
            url: endpoint,
            data: {
              page: page,
              amount_show: $('#amount_show').val(),
              // ACA agregar los demas filtros aplicados, ej:
              customer: $('#customer').val()
            },
            dataType: "json",
          })
          .done(function(data) {
            // Recorremos el arreglo de datos y creamos las filas
            let rows = '',
              users = data.records;
            for (let i = 0; i < users.length; i++) {
              rows += `
                    <tr>
                        <td>${users[i].id_user}</td>
                        <td>${users[i].id_customer}</td>
                        <td>${users[i].name}</td>
                        <td>${users[i].email}</td>
                        <td>${users[i].rol}</td>
                        <td>${users[i].register_date}</td>
                        <td>Edit<td>
                    </tr>`;
            }
            $("#tbody-insert").html(rows);

            // Creamos el paginado
            $("#tfoot-paging").html(createPaging({
              url: endpoint,
              current_page: data.current_page,
              total_records: data.total_records,
              records_by_page: data.records_by_page
            }));
          });
      }

      // Funcion para crear el paginado según la configruación recibida
      function createPaging(data) {
        let html = '<div class="pagination"><ul class="pagination">',
          total_pages = Math.ceil(data.total_records / data.records_by_page);

        if (data.current_page > 1) {
          html += `<li><a data-page="1"><i class="icon-angle-double-arrow"></i></a></li>
                <li><a data-page="${data.current_page - 1}"><i class="icon-angle-left"></i></a></li>`;
        }

        for (let i = 1; i <= total_pages; i++) {
          if (data.current_page == i) {
            html += `<li><a class="page-link active">${i}</a></li>`;
          } else {
            html += `<li><a class="page-link" data-page="${i}">${i}</a></li>`;
          }
        }

        if (data.current_page < total_pages) {
          html += `<li><a class="page-link" data-page="${data.current_page + 1}"><i class="icon-angle-right"></i></a></li>
                <li><a class="page-link" data-page="${total_pages}"><i class="icon-angle-double-right"></i></a></li>`;
        }

        html += '</ul></div>';
        return html;
      }
    });
7
  • Hola @Marcos adapte el código PHP sin get_result() ni el uso de ``fetch_assoc()` quedando de la siguiente manera ideone.com/NToECy me imprime el mismo resultado y, me muestra los datos. El problema es que no esta creando los botones de la paginación, en ambos formatos de PHP no los muestras, amigo puedes agregarle el filtro de fecha y, un buscador, puedes explicarme un poquito más para yo poder añadir más filtros sin problemas como el filtro de cliente, filtro del rol de usuario etc.
    – J. Mick
    Commented el 25 abr. 2021 a las 14:54
  • 1
    Mi +1. Revisando el código para entender su funcionamiento, vi que le falta un ` en esta línea al final y le sobra un ": html += `<li><a class="page-link" data-page="${i}">${i}</a></li>";, quizás si lo pones así html += `<li><a class="page-link" data-page="${i}">${i}</a></li>`; añadiendo al final el `, te soluciona el problema que comentas @J.Mick
    – D.Bulten
    Commented el 25 abr. 2021 a las 16:04
  • 1
    @DBE, gracias por tu comentario
    – Marcos
    Commented el 25 abr. 2021 a las 17:21
  • @J.Mick, agregue un par de correciones mas, avisame cualquier cosa. Respecto a los filtros, eso ya escapa al scope de tu pregunta. ¿Nunca has aplicado filtros (condiciones) a una consulta SQL?
    – Marcos
    Commented el 25 abr. 2021 a las 17:24
  • Hola @DBE Si corregí amigo, fui estudiando el código línea por línea :) voy a revisar la actualización.
    – J. Mick
    Commented el 25 abr. 2021 a las 19:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.