30

Tengo una paginación que funciona correctamente, incluso el filtro para paginar más filas en la misma página, es decir que a través del filtro puedo mostrar 10 o 50 filas o más.

El pequeño defecto que tiene el código, es que la página se vuelve a cargar, cambiando la cantidad de filas que se muestran y lo mismo ocurre en los botones de la paginación.

Este es mi código, todo está funcionando en la misma página index2.php

<div id="wrapper">
    <div class="container">
        <div id="news-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search-bar">
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
                    </div>
                    <div class="actions btn-group">
                        <?php
                            $select_quantity = '';
                            if (isset($_POST['amount_show'])) :
                                $select_quantity = $_POST['amount_show'];
                            endif;
                        ?>
                        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                            <select id="amount_show" name="amount_show" onchange="this.form.submit()">
                                <option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
                                <option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
                                <option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
                                <option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?php
            if (isset($_GET['page'])) :
                $page = $_GET['page'] ?: '';
            else :
                $page = 1;
            endif;

            if (isset($_POST['amount_show'])) :
                $records_by_page = $_POST['amount_show'];
            else :
                $records_by_page = 10;
            endif;

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

            $sql = "SELECT id,name,email
                    FROM users
                    ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows>0) :

            echo '<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>';

            $stmt->bind_result($id,$name,$email);
            while ($stmt->fetch()) :
                echo '<tr>
                    <td>'.$id.'</td>
                    <td>'.$name.'</td>
                    <td>'.$email.'</td>
                    <td>Edit</td>
                </tr>';
            endwhile;
            echo '</tbody>';
            echo '</table>';
            $stmt->close();

    /**
    *
    * Botones ATRAS / SIGUIENTES
    *
    */

            $sql = "SELECT * FROM users";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();

            $BD_records = $stmt->num_rows;
            $stmt->close();
            $con->close();

            $total_page = ceil($BD_records / $records_by_page);
            $prev = $page - 1;
            $next = $page + 1;
            echo '<div class=pagination>
            <ul class="pagination">';
            if ($prev > 0) :
                echo "<li><a href='index2.php?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
                echo "<li><a href='index2.php?page=$prev'><i class='icon-angle-left'></i></a></li>";
            endif;

            for ($i=1; $i<=$total_page; $i++) :
                if ($page==$i) :
                    echo "<li><a class=active>". $page . "</a></li>";
                else :
                    echo "<li><a href='index2.php?page=$i'>$i</a></li>";
                endif;
            endfor;


            if ($page < $total_page ) :
                echo "<li><a href='index2.php?page=$next'><i class='icon-angle-right'></i></a></li>";
                echo "<li><a href='index2.php?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
            endif;

            echo '</ul></div>';

            else :
                $stmt->close();
            endif;

        ?>
    </div>
</div>

He realizado las siguientes configuraciones debido a las recomendaciones de JSON, a las que me han recomendado.

ajax.php

if (isset($_GET['page'])) :
                $page = $_GET['page'] ?: '';
            else :
                $page = 1;
            endif;

            if (isset($_POST['amount_show'])) :
                $records_by_page = $_POST['amount_show'];
            else :
                $records_by_page = 10;
            endif;

$sql = "SELECT id,name,email
FROM users
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$result = $con->query($sql);
$data_rows = array();
$result = $con->query($sql);
while($row = mysqli_fetch_assoc($result)) {
    $data_rows[] = $row;
}

echo json_encode($data_rows, JSON_PRETTY_PRINT);

Encontré un código ajax lo cual le he llamado script.js, y mediante ajax

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

Muestro los datos sin problema.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody-insert">

    </tbody>
</table>

Ahora mi problema es, como mostrar los botones de la paginación y el filtro de mostrar más fila de resultados.

¿Cómo tengo que enviar esta información al ajax y mostrar la información enviada?

Me pueden explicar.

13
  • Hola, acabas de dar una recompensa a una respuesta cuya publicación no ha sido modificada desde 28 oct. 18, te sugiero revisar la información en el sitio sobre identidades falsas
    – Jorgesys
    Commented el 15 abr. 2021 a las 15:43
  • 1
    Podrias explicarnos porque diste una recompensa a una pregunta que tiene una respuesta aceptada desde hace mas de dos años?
    – gbianchi
    Commented el 16 abr. 2021 a las 16:53
  • Cambiaste toda la pregunta? entonces las respuestas dejaron de ser validas.. porque hiciste algo asi? de esa forma, no va a quedar otra que cancelar tu recompensa...
    – gbianchi
    Commented el 20 abr. 2021 a las 4:50
  • @gbianchi Que tiene de malo actualizar la pregunta si es el mismo código que tenía y, solucionada con la pregunta aceptada. Lo hice porque al abril una nueva pregunta iba ser cerrada porque iba ser el mismo título y mismo código
    – J. Mick
    Commented el 20 abr. 2021 a las 11:35
  • No no.. cuando vos cambias toda tu pregunta, entonces las respuestas dejan de ser validas, y alguien que lea tu pregunta no va a entender como la respuesta soluciona tu pregunta, que es otra. Tenias que abrir una nueva pregunta, con el mismo codigo si querias, pero con tus nuevas dudas... La respuesta que aceptaste, deja de ser valida a esta nueva pregunta, entonces se pierde.. se entiende? por eso no entendemos porque estas dando recompensas a una pregunta tan vieja, que ya tiene respuesta...
    – gbianchi
    Commented el 20 abr. 2021 a las 12:10

6 respuestas 6

5
+100

Tenemos en los navegadores diferentes acciones predeterminadas es importante tener en cuenta, en los artículos en ingles podemos encontrar una gran información y con ejecuciones reales para entender su funcionamiento también es importante ir conociendo a más a fondo el lenguaje.

Ahora para comenzar efectuar cambios se debe detectar primeramente las posibles ejecuciones que harán recargar la página, en este caso:

  • El select option -> #amount_show que envía un nuevo valor por método POST al paginador.
  • Y por último la generación de los enlaces del paginador mediante etiquetas <a> que le dice al script php qué registros debe recuperar a través del método GET solicitud.

Entonces como no existe inconvenientes en el Script PHP, todo debes ir manejando desde el código ajax.

Por lo tanto, el código ajax, quedaría de tal forma:

$(document).ready(function() {
    //Cuando cambiemos el valor del select option
    //mediante su #id obtendremos la información sobre el evento

    $('#amount_show').change(function(evt) {
      // Cancelamos la acción del navegador que tiene por defecto.
      evt.preventDefault()
      // Obtenemos la URL de destino del formulario
      url = $(this).parent().attr('action')
      // Llamamos a la función que hará la solicitud.
      ajaxLoad(url)
    });

    // Siguiendo el mismo modelo del código para toda acción que
    // Deseemos enviar y mostrar al paginador.
    $('.items').on('click', '.pagination li a', function(evt) {
      evt.preventDefault()
      url = $(this).attr('href')
      ajaxLoad(url)
    });

    function ajaxLoad(url) {
      query_params = {
        amount_show: $('#amount_show').val()
      };
      // Mostramos una animación por cada evento que realicemos.
      $('.items').html('<div class="loading">Loading...</div>')
      $.ajax({
        type: "GET",
        url: url,
        data: $.param(query_params),
        //Obtenemos los datos.
        success: function(data) {
          //Insertamos los datos en una etiqueta
          //que tenga la clase .items
          $('.items').fadeOut('1000', function() { $(this).html(data) }).fadeIn('1000')
        }
      });
    }
  });

Recomendaciones

Referencias

4
  • 1
    Hola, registramos que recibiste una recompensa en esta publicación realizada el 28 oct. 18, te sugiero revisar la información en el sitio sobre identidades falsas identidades falsas
    – Jorgesys
    Commented el 16 abr. 2021 a las 17:04
  • Hola @Jorgesys que se supone que tengo que revisar y, porque, puedes ser más especifico, no entiendo sobre el porque me enlazas sobre identidades falsas ? Commented el 17 abr. 2021 a las 19:02
  • Te sugiero revisar la información, el sistema nos indica cuando el mismo usuario se esta asignando puntuación de forma ilegitima, recuerda que se puede quitar la recompensa si es que se determina que no fue ganada legitimamente, saludos.
    – Jorgesys
    Commented el 17 abr. 2021 a las 19:09
  • @Jorgesys No existe problema, puede quitármelos todos, lo que he realizado es aportar en este foro, los puntos no es la gran cosa amigo :) aparte muy poco estoy por aquí. Saludos en confianza, no pasa nada, aunque si realmente les preocupa este tema, existen muchas cosas por corregir. Commented el 18 abr. 2021 a las 2:09
4

Breve introducción sobre el uso de AJAX

En primer lugar, sinifica Asynchronous Javascript and XML. En resumen, AJAX sirve para obtener información del servidor (Operaciones server-side o datos de la base de datos) que no ha cargado con el sitio. Por ejemplo, los bloques PHP (delimitados por las etiquetas <?php ?>) son parte del código del sitio que el servidor ejecuta, previo a la entrega del contenido al cliente.

Habiendo explicado esto, dado que la información que estás filtrando en la tabla es información que ya está cargada en la página, no es una operación AJAX lo que estás haciendo, sino que estás ejecutando un script del lado del cliente para mostrar/ocultar registros de la tabla con base en el texto ingresado en el input del filtro.

Según tu pregunta, entiendo que lo que sucede es que tu función de filtrado solamente opera sobre los registros que se muestran en la página, y no muestra los suficientes registros como para llenar la tabla según el tamaño de la paginación. Por ejemplo, si la paginación está configurada para mostrar 50 registros, el filtro muestra solamente 39 registros de la página actual.

Para que el filtro muestre 50 registros (según el ejemplo anterior), debes enviar un request asíncrono al servidor. Digamos, tu sitio debe tener una URL (por ejemplo https://tusitio.com/filtrarUsuarios.php) al que se haga una consulta asíncrona enviando los parámetros por los que vas a filtrar, de forma que ese PHP devuelva:

  1. Una respuesta en formato JSON/XML o cualquier formato de tu elección con la lista de resultados correspondientes a la página; o
  2. El elemento de tabla cargado con los registros correspondientes a la página (<table></table>).

Una vez obtenida la respuesta del servidor, debes colocar los elementos de forma dinámica en la tabla. Si es la opción 1, debes usar la función document.createElement() para crear elementos HTML (tr y td) para colocarlos en tu tabla, y si es la opción 2, reemplazando el HTML de la tabla usando innerHTML. Mi sugerencia es usar la opción 1, ya que es el estándar para consumo de APIs y servicios web.

Dado que la forma que usaste en tu ejemplo hace un POST a la misma página, donde carga los registros, entiendo que el filtro no funciona de forma asíncrona. Es decir, la página vuelve a cargar con los registros filtrados una vez que haces el submit de la forma. Deberás modificar tu función myFunction() para que haga la llamada AJAX usando una implementación similar a la siguiente:

// Instancia de Request para llamar la URL
var request = new XMLHttpRequest();

// Capturar el evento de cambio de estado del request
request.onreadystatechange = function() {
  if(request.readyState === 4) {
    if(request.status === 200) { 
      // Ejecutar código de creación de registros
    } else {
      // Ejecutar código de captura de error en la
      // llamada de la URL
    } 
  }
}
 
// Enviar el request
request.open('POST', 'filtrarUsuarios.php'); // URL de ejemplo

El código mostrado arriba es la implementación más básica de una llamada AJAX. La llamada es asíncrona porque el código que creará los registros de forma dinámica se ejecuta hasta que se recibe la respuesta de la llamada a la URL.


Actualización de pregunta

En vista de que vas a optar poe r la opción 2 de las mencionadas anteriormente (que consiste en obtener código HTML de la llamada AJAX para introducirlo dinámicamente en nuestra página), el archivo ajax.php deberá retornar el HTML formado de la tabla, el cual tomaremos de la respuesta de la llamada (via ) y usaremos para reemplazar el contenido de un contenedor (un nuevo elemento <div class="table-container" />). Así, la separación del contenido generado por la consulta a la base de datos resulta algo así:

        if (isset($_GET['page'])) :
            $page = $_GET['page'] ?: '';
        else :
            $page = 1;
        endif;

        if (isset($_POST['amount_show'])) :
            $records_by_page = $_POST['amount_show'];
        else :
            $records_by_page = 10;
        endif;

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

        $sql = "SELECT id,name,email
                FROM users
                ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
        $stmt = $con->prepare($sql);
        $stmt->execute();
        $stmt->store_result();
        if ($stmt->num_rows>0) :

        echo '<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>';

        $stmt->bind_result($id,$name,$email);
        while ($stmt->fetch()) :
            echo '<tr>
                <td>'.$id.'</td>
                <td>'.$name.'</td>
                <td>'.$email.'</td>
                <td>Edit</td>
            </tr>';
        endwhile;
        echo '</tbody>';
        echo '</table>';
        $stmt->close();

/**
*
* Botones ATRAS / SIGUIENTES
*
*/

        $sql = "SELECT * FROM users";
        $stmt = $con->prepare($sql);
        $stmt->execute();
        $stmt->store_result();

        $BD_records = $stmt->num_rows;
        $stmt->close();
        $con->close();

        $total_page = ceil($BD_records / $records_by_page);
        $prev = $page - 1;
        $next = $page + 1;
        echo '<div class=pagination>
        <ul class="pagination">';
        if ($prev > 0) :
            echo "<li><a href='index2.php?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
            echo "<li><a href='index2.php?page=$prev'><i class='icon-angle-left'></i></a></li>";
        endif;

        for ($i=1; $i<=$total_page; $i++) :
            if ($page==$i) :
                echo "<li><a class=active>". $page . "</a></li>";
            else :
                echo "<li><a href='index2.php?page=$i'>$i</a></li>";
            endif;
        endfor;


        if ($page < $total_page ) :
            echo "<li><a href='index2.php?page=$next'><i class='icon-angle-right'></i></a></li>";
            echo "<li><a href='index2.php?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
        endif;

        echo '</ul></div>';

        else :
            $stmt->close();
        endif;

El resulado de esta página debe ser embebido en la página principal de forma dinámica, a través de la función callback de la función $.ajax().

<script type="text/javascript">
$(document).ready(

function() { 
    $('.pagination li a').on('click', function(){
        // Podés crear una pantalla modal para
        // mostrar mientras carga el archivo ajax.php

        var page = $(this).attr('data');       

        // Podés asignar los parametros como JSON para
        // enviarlos en la función $.ajax
        var data = {
            page: page, 
            amount_show: $('#amount_show').val() // Obtener el valor del elemento select
        };

        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: data,
            success: function(data) {

                // Reemplazar el contenido del div que creamos
                // para ubicar la tabla
                $('.table-container').html(data);

            }
        });
        return false;
    });              
});    
</script>

La función jQuery html() reemplaza el contenido actual del elemento $('.table-container') que crearemos para colocar nuestra tabla.

La página padre debe quedar algo así:

<div id="wrapper">
    <div class="container">
        <div id="news-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search-bar">
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
                    </div>
                    <div class="actions btn-group">
                        <?php
                            $select_quantity = '';
                            if (isset($_POST['amount_show'])) :
                                $select_quantity = $_POST['amount_show'];
                            endif;
                        ?>
                        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                            <select id="amount_show" name="amount_show" onchange="this.form.submit()">
                                <option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
                                <option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
                                <option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
                                <option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-container">
        </div>
    </div>
</div>

El código mostrado arriba probablemente necesite un poco más de trabajo de tu parte, pero espero que haya transmitido claramente lo que debés hacer.

17
  • JSON se usa como formato de la data que el servidor nos da como resultado de la consulta, y es casi un estándar para servicios REST. ¿A qué te referís con que no te convence?
    – Niche
    Commented el 10 oct. 2018 a las 16:33
  • Si es así, entonces no vas a poder usar AJAX. Tendrás que aplicar el filtro en la consulta de PHP a la base, no en el Javascript para el filtro.
    – Niche
    Commented el 10 oct. 2018 a las 23:09
  • Estuve buscando ejemplos y me encontré un tutorial, y su código enlazado al ajax es un código normal aquí lo enlazo sin uso de JSON y el tutorial lo observe aquí
    – J. Mick
    Commented el 10 oct. 2018 a las 23:14
  • Ese tutorial usa lo que el inciso 2 que mi respuesta explica. El ajax.php del tutorial genera la estructura html de la tabla y usa la línea $('.items').fadeIn(2000).html(data); para reemplazar el contenido del elemento .items (correspondiente a la lista) por la lista generada por ajax.php.
    – Niche
    Commented el 10 oct. 2018 a las 23:20
  • 1
    @JordiHuertas Entiendo, pero en la primera instancia es díficil comprender más aún cuando en la primera respuesta antes de ser editada no existía más explicación de cómo mostrar los resultados y como enviarlos a diferencia de lo que he realizado yo, guiandome con ejemplos de cómo hacerlo, pero me falta 2 cosas importantes aún que es lo de los botones de la paginación y el filtro de mostrar más filas.
    – J. Mick
    Commented el 19 oct. 2018 a las 22:42
0

Voy a internar de ser lo mas claro posible:

1 - Debes entender que el PHP se ejecuta del lado del servidor y devuelve HTML que interpreta el browser .

2 - El tema del ajax/jquery se ejecuta del lado del clinete (browser) .

Teniendo esto en cuenta considera lo siguiente:

  • Los href de paginación , y el onchange del select deben hacer referencia a una funcion Javascript interpretada por el Browser.

  • La función en el browser es el que tiene que ir a buscar los datos a mostrar. el cual puede ser un PHP que se ejecuta en el server. $.ajax

  • Los datos que devuelva el PHP se pueden implementar en tu HTML tal como te muestra el código que nos muestras:

 $.ajax({
            type: "GET",
            url: "ajax.php",
            data: dataString,
            success: function(data) {
                $('.items').fadeIn(2000).html(data);
                $('.pagination li').removeClass('active');
                $('.pagination li a[data="'+page+'"]').parent().addClass('active');

            }
        });

Espero que te sea de utilidad.

1
  • 1
    Hola @MauricioBiott agradezco el tiempo que has dedicado en responder pero no entiendo nada ejemplos de Ajax puedo encontrar pero el problemas es como puedo usarlo como ahora en la edición de mi pregunta, que he logrado implementarlo por los ejemplos que se ha encontrado de como usarlo.
    – J. Mick
    Commented el 19 oct. 2018 a las 22:45
0

En el archivo donde tiene el formulario agregar y definir lo siguiente: en el form definir un id="form-pagination" y el onsubmit="return false;" para que no se recargue la pagina, ademas agregar dos div donde se insertara la tabla de resultados y otro div donde se agregara la paginación .

<div id="wrapper">
    <div class="container">
        <div id="news-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search-bar">
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
                    </div>
                    <div class="actions btn-group">
                        <?php
                            $select_quantity = '';
                            if (isset($_POST['amount_show'])) :
                                $select_quantity = $_POST['amount_show'];
                            endif;
                        ?>
                        <form method="post" id="form-pagination" onsubmit="return false;">
                            <input name="page" id="page" type="hidden" value=1>
                            <select id="amount_show" name="amount_show" >
                                <option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
                                <option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
                                <option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
                                <option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div id="contenido_table"  class="col-sm-12">
        </div>
        <div id="pagination" class="col-sm-12">
        </div>
    </div>
</div>

En el archivo ajax.php puedes devolver dos partes el contenido de la tabla y la paginación, en los elementos que se encuentran dentro de los botones de la paginación se definirá el atributo page="". y se regresara la paginación y la tabla de resultados

    header('Content-Type: application/json');
    $html_table="";
    if (isset($_GET['page'])) :
        $page = $_GET['page'] ?: '';
    else :
        $page = 1;
    endif;

    if (isset($_POST['amount_show'])) :
        $records_by_page = $_POST['amount_show'];
    else :
        $records_by_page = 10;
    endif;

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

    $sql = "SELECT id,name,email
            FROM users
            ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
    $stmt = $con->prepare($sql);
    $stmt->execute();
    $stmt->store_result();
    if ($stmt->num_rows>0) :
        $html_table.='<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>';

    $stmt->bind_result($id,$name,$email);
    while ($stmt->fetch()) :
        $html_table.='<tr>
            <td>'.$id.'</td>
            <td>'.$name.'</td>
            <td>'.$email.'</td>
            <td>Edit</td>
        </tr>';
    endwhile;
    $html_table.='</tbody>';
    $html_table.='</table>';
    $stmt->close();

/**
*
* Botones ATRAS / SIGUIENTES
*
*/
    $html_pagination="";
    $sql = "SELECT * FROM users";
    $stmt = $con->prepare($sql);
    $stmt->execute();
    $stmt->store_result();

    $BD_records = $stmt->num_rows;
    $stmt->close();
    $con->close();

    $total_page = ceil($BD_records / $records_by_page);
    $prev = $page - 1;
    $next = $page + 1;
    $html_pagination.='<div class=pagination>
    <ul class="pagination">';
    if ($prev > 0) :
        $html_pagination.="<li><a page='1'><i class='icon-angle-double-arrow'></i></a></li>";
        $html_pagination.="<li><a page='$prev'><i class='icon-angle-left'></i></a></li>";
    endif;

    for ($i=1; $i<=$total_page; $i++) :
        if ($page==$i) :
            $html_pagination.= "<li><a class=active>". $page . "</a></li>";
        else :
            $html_pagination.= "<li ><a page='$i'>$i</a></li>";
        endif;
    endfor;


    if ($page < $total_page ) :
        $html_pagination.= "<li ><a page='$next' href=''><i class='icon-angle-right'></i></a></li>";
        $html_pagination.="<li ><a page='$total_page' href=''><i class='icon-angle-double-right'></i></a></li>";
    endif;

    $html_pagination.='</ul></div>';

    else :
        $stmt->close();
    endif;
$data=array();
$data["html_table"]=$html_table;
$data["html_pagination"]=$html_pagination;
echo json_encode($data, JSON_PRETTY_PRINT);

en tu script.js agregaras las funciones, en el evento que involucra a la paginacion se actualiza el valor del campo page que agregamos en el formulario para que al momento de llamar la funcion enviarFormulario solo se tome el contenido del formulario y se envié.

   //se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
    enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
    var page=parseInt($(this).data("page"));
    if(!isNaN(page)){
        $("#form-pagination #page").val(page);
        enviarFormulario();
    }
    e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
    $("#form-pagination #page").val(1);
    enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
    $.ajax({
            type: "GET",
            data: $("#form-pagination").serialize(),
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                $("#contenido_table").html(data["html_table"]);
                $("#pagination").html(data["html_pagination"]);
            }
    });  

}

Espero que te sea de gran ayuda.

2
  • Hola @JuanCarlos el código Ajax.php se genera y muestra resultados correctamente. Pero en la página principal donde va la estructura del código HTML y PHP y el script no muestra nada es decir que no me muestra resultados de la paginación, no me nuestra datos.
    – J. Mick
    Commented el 28 oct. 2018 a las 0:40
  • al parecer es por que el acceso a los datos devueltos estaba como objeto data.html_table y debe de ser como arreglo data["html_table"] Commented el 29 oct. 2018 a las 14:26
0

Te voy a dejar un ejemplo que he probado en Localhost según tu código, estuve haciendo pruebas ya que estoy aprendiendo jQuery / JavaScript y que mejor aprendizaje que pelearse con el código :)

El sistema de filtración dispone de:

  1. Cantidad de registros a mostrar (el que tenías)
  2. Por la fecha (date)
  3. Un Buscador que buscara por palabra / palabras
  4. El filtro del usuario y el resto de filtros te lo dejo a ti para que aprendes también.

He cambiado el parámetro data: $.param(query_params) por data: jQuery.param(query_params),

jQuery.param () toma una matriz de pares clave-valor y la convierte en una cadena que puede usar como cadena de consulta en solicitudes HTML.

Tambien he modernizado el código AJAX.

una de ellas $.ajax({ por var request = $.ajax({

Base de Datos

CREATE TABLE `cliente` (
  `idCliente` smallint(3) UNSIGNED NOT NULL,
  `nomCliente` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
  `dateMember` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `roll` varchar(30) COLLATE utf8_spanish_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

INSERT INTO `cliente` (`idCliente`, `nomCliente`, `dateMember`,`roll`) VALUES
(1, 'Daniel', '2021-04-08 00:00:00', 'rol1'),
(2, 'Joe', '2021-04-11 00:00:00', 'rol1'),
(3, 'Alicia', '2021-04-13 00:00:00', 'rol2'),
(4, 'Marcos', '2021-04-13 00:00:00', 'rol1'),
(5, 'Melanie', '2021-04-15 00:00:00', 'rol3'),
(6, 'Thalia', '2021-04-15 00:00:00', 'rol1'),
(7, 'David', '2021-04-15 00:00:00', 'rol1');

Posible ejemplo:

AJAX

<!DOCTYPE html>
<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>        
$(function() {

  // Obtenemos URL paginacion
  $('.data-pagination').on('click', '.pagination li a', function(evt) {
    evt.preventDefault();
    url = $(this).attr('data-target');
    //alert(url);
    ajaxLoad(url);
  });

    // Filtros (Puedes crear los filtros que deseas, simplmente recuerda añadirlo a tu objeto 'var query_params')
   //
  // Amount
  $('#amount_show').change(function(evt) { 
    evt.preventDefault();      
    ajaxLoad('pagination.php');
  });

  // Fecha
  $('#date_show').change(function(evt) {
    evt.preventDefault(); 
    var date = $(this).val();           
    console.log(date, 'change');
    ajaxLoad('pagination.php');
  });

  // Buscador
  $( "input[type='text']#buscador_show" ).change(function(evt) {
    evt.preventDefault(); 
    var txt = $(this).val();  
    console.log(txt);
    ajaxLoad('pagination.php');
  });

  // Cargar contenido dinamico
  function ajaxLoad(url) {            
   
    // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a tu objeto)
    var query_params = {
        amount_show: $('#amount_show').val(),
        fecha: $('#date_show').val(),
        buscador: $('#buscador_show').val()                
        // etc
    };         
    
    // AJAX
    var request = $.ajax({
        method: "GET",
        url: url,
        data: jQuery.param(query_params),
        dataType: "html"            
    });

    // Success
    request.done(function(data) {  
        // Elimino header, ya que se me repite dos veces.
        $('header').remove()
                        
        //$('.data-pagination').fadeOut("fast", function() { $(this).html(data).fadeIn("fast") })
        //
        // Cargar nuevo contenido
        $('.data-pagination').html('');
        $('.data-pagination').html(data).fadeIn('fast');
        
     });

     // Error
     request.fail(function(jqXHR, textStatus) {
       alert("Ocurrió un error inesperado (paginador): " + textStatus);
     });    
    }
  });
</script>   
</head>

Layout HTML

<body>

<header>
  <h1>Soy una prueba</h1>

  <select id="amount_show" name="amount_show">
    <option value="1" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 1) echo "selected"; ?>>1</option>
    <option value="2" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 2) echo "selected"; ?> >2</option>
    <option value="3" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 3) echo "selected"; ?>>3</option>
    <option value="100" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 100) echo "selected"; ?>>100</option>
  </select>

  <input id="date_show" type="date" name="fecha" <?php if ( isset($_GET['fecha']) ) echo "value = '{$_GET['fecha']}'"; ?>  >

  <input id="buscador_show" type="text" name="buscador" placeholder="Buscador" <?php if ( isset($_GET['buscador']) ) echo "value = '{$_GET['buscador']}'"; ?>>

</header>

<div class="data-pagination">
   <?php
    $strs = '';
    $pagination_page = 'pagination.php';
    $defaul_records = 1; 
   
    // Si esta definida nuestra paginacion
    if (isset($_GET['page'])) {
        $page = $_GET['page'] ? : '';
        //var_dump($_GET);
    } else {
        $page = 1;
    }

    // Si esta definida total de registros a mostrar y que sea mayor a uno que es su valor por defecto.
    if (isset($_GET['amount_show']) && $_GET['amount_show'] > 1) { // && $_GET['amount_show'] > 1 sin esto ay muchas ocasiones que me marcaba un error, asi que obtengo el select si es mayor que nuestro default selecionado
        $records_by_page = $_GET['amount_show'];
        //var_dump($_GET);
    } else {
        $records_by_page = $defaul_records;
    }

    // Si esta definida nuestra fecha
    if ( isset($_GET['fecha']) ) {
        $fecha_sql = $_GET['fecha'] ?: '';
    }

    // Si esta defenida nuestra buscador
    if ( isset($_GET['buscador']) ) {
        $txt = $_GET['buscador'] ?: '';
        $txt = "%$txt%";
    }

    // Ubicación paginación.
    $localization_sql = ($page - 1) * $records_by_page;

    // Añadimos los filtros a nuestra sentencia SQL. 
    //
    // Creamos nuestra sentencia segun el filtro o filtros obtenidos a la vez, asi podemos tambien filtrar varios filtros seleccionado con el on change en una peticion
    //
    // Filtramos solo por 'fecha'.        
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT idCliente,
                                    nomCliente
                            FROM cliente
                            WHERE DATE(dateMember) = ?
                            ORDER BY idCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos solo por 'palabra'        
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT idCliente,
                                    nomCliente
                            FROM cliente
                            WHERE nomCliente LIKE ?
                                  
                            ORDER BY idCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'fecha' y 'palabra'
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT idCliente,
                                    nomCliente
                            FROM cliente
                            WHERE DATE(dateMember) = ? AND nomCliente LIKE ?
                                  
                            ORDER BY idCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT idCliente,
                                    nomCliente
                            FROM cliente
                            ORDER BY idCliente DESC LIMIT $localization_sql, $records_by_page");
    }
    // Ejecutar sentencia
    $stmtPD->execute();
    $stmtPD->store_result();
    // Compruebas registros
    if ($stmtPD->num_rows > 0):

        ob_start();
        // Muestras layout
        $strs .= '<table id="data-table" class="table bootgrid-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>CLIENTE</th>
                            <th>ACCIÓN</th>
                        </tr>
                    </thead>
                    <tbody>';

        $stmtPD->bind_result(
            $idCliente,
            $nomCliente
        );
        while ($stmtPD->fetch()) {
            $strs .= '<tr>
                        <td>'.$idCliente.'</td>
                        <td>'.$nomCliente.'</td>
                        <td>
                            <span class="view_data" id="'.$idCliente.'">Ver</span>
                            <span class="edit_data" id="'.$idCliente.'">Editar</span>
                        </td>
                    </tr>';
        }
        $stmtPD->close();

        $strs .= '</tbody></table>

                    <div class="pagination"><ul class="pagination">';
        
          // Contamos registros a mostrar paginación según los filtros seleccionados
         //
        // Filtramos por fecha
       if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') :
        $stmtPD = $con->prepare("SELECT * FROM cliente WHERE DATE(dateMember) = ?");
        $stmtPD->bind_param('s', $fecha_sql);

       // Filtramos por palabra
       elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') :
        $stmtPD = $con->prepare("SELECT * FROM cliente WHERE nomCliente LIKE ?");
        $stmtPD->bind_param('s', $txt);

      // Filtramos por fecha y palabra   
      elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') :
        $stmtPD = $con->prepare("SELECT * FROM cliente WHERE DATE(dateMember) = ? AND nomCliente LIKE ?");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);

      // Default sin filtro
      else :
        $stmtPD = $con->prepare("SELECT * FROM cliente");
      endif;

        $stmtPD->execute();
        $stmtPD->store_result();

        $BD_records = $stmtPD->num_rows;
        $stmtPD->close();
        $con->close();

        $total_page = ceil($BD_records / $records_by_page);
        $prev = $page - 1;
        $next = $page + 1;

        if ($prev > 0) {
            $strs .= "<li><a data-target='" . $pagination_page . "?page=1'>Inicio</a></li>";
            $strs .= "<li><a data-target='" . $pagination_page . "?page=$prev'><</a></li>";
        }

        for ($i = 1;$i <= $total_page;$i++) {
            if ($page == $i) {
                $strs .= "<li><a class='page-link active' >" . $page . "</a></li>";
            } else {
                $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$i'>$i</a></li>";
            }
        }

        if ($page < $total_page) {
            $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$next'>></a></li>";
            $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$total_page'>last</a></li>";
        }

        $strs .= '</ul></div>';

        echo $strs;
        
    else:
       $stmtPD->close();
       echo "no records..";
    endif;
    ?>
    </div>
    </body>
    </html>
0

La pregunta es un tanto antigua y conviene actualizar, no solo para optimizar, también para facilitar el mantenimiento a futuro. Mis recomendaciones:

  1. Desde PHP envía solo datos en formato JSON, que te ayudará a reducir significativamente el contenido de cada petición y, por consiguiente, el tiempo de respuesta
  2. En Javascript recibes los datos y generas el HTML necesario para agregar filas a la tabla y para generar los enlaces de paginación
  3. Agrega tantos campos de filtro como sean necesarios e inclúyelos todos en las peticiones, no importa si están vacíos o no, eso ya se resolverá al crear la consulta en PHP
  4. Para evitar errores, la tabla debe existir desde que se carga la página y se va modificando al obtener datos; lo mismo para la lista donde van a aparecer los enlaces de paginación
  5. Asigna una misma función para todos los campos y enlaces de paginación, tienen que estar relacionados para poder tener la funcionalidad esperada
  6. En los enlaces para ver/modificar clientes, no uses ID, porque son numéricos y se duplican. En su lugar usa atributo de datos: data-id="id-de-cliente"
  7. Las plantillas de texto son ideales para crear HTML de enlaces y filas de la tabla.

// Página actual, se va a usar para peticiones y enlaces de paginación
let curPage = 1;

function loadAjax(page = 1) {
    // Incluir todas las opciones de filtro y paginación
    let params = {
        pagina: page,
        elementos: $('#elementos').val(),
        tipo: $('#tipo-cliente').val(),
        nombre: $('#nombre-cliente').val()
    };
    // Número de página actual, para crear enlaces
    curPage = page;
    $('.data-pagination').html('<li class="loading">Loading...</li>');
    $.ajax({
        type: "GET",
        // Misma página para todos los filtros
        url: 'paginacion.php',
        // Enviar parámetros
        data: params,
        // Recibir respuesta como JSON
        dataType: 'json',
        // Ejecutar en función aparte
        success: drawTable
    }).fail(function(xhr, status, message) {
        console.log(status, message);
        curPage = 1;
        $('.data-pagination').fadeOut('1000', function() {
            $(this).html('Error cargando datos');
        }).fadeIn('1000');
    });
}

function drawTable(data) {
    // Eliminar registros actuales en la tabla
    $('.tr-cliente').remove();
    
    let records = data.clientes.length;
    let pages = parseInt(data.pages) || 1;
    if(records == 0) {
        // No hay información para mostrar
        $('#empty').show();
        $('.data-pagination').html('');
    }
    $('#empty').hide();
    data.clientes.forEach(cliente => {
        $('#data-table tbody').append(
            `<tr class="tr-cliente">
                <td>${cliente.idCliente}</td>
                <td>${cliente.nomCliente}</td>
                <td>${cliente.tipoCliente}</td>
                <td>
                    <span class="view-data" data-id="${cliente.idCliente}">Ver</span>
                    <span class="edit-data" data-id="${cliente.idCliente}">Editar</span>
                </td>
            </tr>`
        );
    });
    // Crear enlaces de paginación enviando total de páginas disponibles
    pagination(pages);
}

// Crear elemento de lista con enlace de página
function getPageLink(page, text) {
    if(!text) {
        text = page;
    }
    return `<li><a href="#" data-page="${page}">${text}</a></li>`;
}

function pagination(pages) {
    // Eliminar posible contenido anterior
    $('.data-pagination').html('');
    // Crear enlace anterior solo si página actual no es la primera
    if(curPage > 1) {
        $('.data-pagination').append(getPageLink(curPage - 1, 'Anterior'));
    }
    // Crear enlaces para todas las páginas disponibles
    for(let i = 1; i <= pages; i++) {
        $('.data-pagination').append(getPageLink(i));
    }
    // Crear enlace siguiente solo si página actual no es la última
    if(curPage < pages) {
        $('.data-pagination').append(getPageLink(curPage + 1, 'Siguiente'));
    }
}

$(function() {
    // Escuchar cambios en campos de filtro, se pueden seleccionar todos en una misma línea
    $('#elementos, #tipo-cliente, #nombre-cliente').change(loadAjax);

    // Escuchar eventos para ver y editar, delegados a la tabla
    $('#data-table').on('click', '.view-data', function() {
        // Obtener ID
        let idCliente = $(this).data('id');
        console.log('Ver: ' + idCliente);
        // Aquí lo que necesites hacer para mostrar más información
    });
    $('#data-table').on('click', '.edit-data', function() {
        // Obtener ID
        let idCliente = $(this).data('id');
        console.log('Editar: ' + idCliente);
        // Aquí lo que necesites hacer para editar
    });

    // Escuchar eventos en enlaces de paginación, delegados a UL
    $('.data-pagination').on('click', 'li a', function(e) {
        e.preventDefault();
        let page = parseInt($(this).data('page')) || 1;
        console.log(page);
        loadAjax(page);
    });

    // Ejecutar con valores por defecto
    loadAjax();
});


/* *********** PROBANDO ********
 * Este es un ejemplo de la estrucutra que debes recibir desde PHP
 */
let data = {
    // El total de páginas debe ser 1, pero...
    pages: 5, // ...solo para mostrar más enlaces y ver que funciona
    clientes: [
        { idCliente: 1, nomCliente: 'StackOverflow', tipoCliente: 'Normal' },
        { idCliente: 2, nomCliente: 'Apple', tipoCliente: 'Distribuidor' },
        { idCliente: 3, nomCliente: 'Google', tipoCliente: 'Mayorista' },
    ]
};
// 
setTimeout(drawTable, 1500, data);
/* ********** Fin de pruebas ********** */
#data-table {
    margin:20px auto;
}
.data-pagination {
    list-style:none;
    margin:20px 0;
    text-align:center;
}
.data-pagination li {
    display:inline-block;
    margin:0;
    padding:0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Elmentos por página:
    <select id="elementos" name="elementos">
        <option value="10" selected>10</option>
        <option value="25" >25</option>
        <option value="50" >50</option>
        <option value="100">100</option>
    </select>
</div>
<div>Filtrar por tipo:
    <select id="tipo-cliente" name="tipo-cliente">
        <option value="" selected>Todos</option>
        <option value="normal">Normal</option>
        <option value="distribuidor">Distribuidor</option>
        <option value="mayorista">Mayorista</option>
    </select>
</div>
<div>Buscar por nombre:
    <input type="text" id="nombre-cliente" name="nombre-cliente" value="">
</div>

<table id="data-table" class="table bootgrid-table">
<thead>
    <tr>
        <th>ID</th>
        <th>CLIENTE</th>
        <th>TIPO</th>
        <th>ACCIÓN</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="4" id="empty">No hay información para mostrar</td>
    </tr>
</tbody>
</table>
<ul class="data-pagination"></ul>

En PHP vas a recibir en $_GET lo siguiente: pagina, elementos, tipo y nombre. Y debes validar cada uno para saber si se deben incluir en la consulta, de preferencia, con asignación ternaria; por ejemplo:

// Si está en $_GET, debe ser entero, de lo contrario, se asigna 1
$pagina = (!empty($_GET['pagina'])) ? (int) $_GET['pagina'] : 1;
// Valor en $_GET o cadena vacía
$nombre = (!empty($_GET['nombre'])) ? $_GET['nombre'] : '';

Ya teniendo todas las variables, debes analizar cada una para saber si es necesario agregarla a filtros y vas a necesitar ejecutar dos consultas, una para contar las filas y otra para obtenerlas. Revisa los comentarios en el código para saber qué hace cada cosa.

<?php
// Obtener todos los parámetros necesarios
$pagina = (!empty($_GET['pagina'])) ? (int) $_GET['pagina'] : 1;
$elementos = (!empty($_GET['elementos'])) ? (int) $_GET['elementos'] : 1;
$tipo = (!empty($_GET['tipo'])) ? $_GET['tipo'] : '';
$nombre = (!empty($_GET['nombre'])) ? $_GET['nombre'] : '';

// Crear un arreglo para filtros, tipo de parámetros y valores de remplazo
$filtros = [];
$tipos = '';
$valores = [];

// Verificar tipo para agregar a filtros
if($tipo != '') {
    $tipos .= 's'; // Si es entero, cambia por 'i'
    $filtros[] = 'tipoCliente = ?';
    $valores[] = $tipo;
}
// Verificar nombre para agregar a filtros
if($nombre != '') {
    $tipos .= 's';
    $filtros[] = 'nombre LIKE ?';
    $valores[] = "%$nombre%";
}

// Crear cadena de filtro, solo si se seleccionó una o más opciones
$filtro = (count($filtros) > 0) ? 'WHERE ' . implode(' AND ', $filtros) : '';

// Crear el arreglo a devolver como JSON
$data = [
    'pages' => 1,    // Total de páginas disponibles
    'clientes' => []   // Clientes encontrados
];

// Contar total de filas encontradas
$smCuenta = $con->prepare("SELECT COUNT(*) as total FROM cliente $filtro");
// Agregar valores de filtros
if(count($filtros) > 0) {
    $smCuenta->bind_param($tipos, ...$valores);
}
$smCuenta->execute();
$smCuenta->store_result();
$smCuenta->bind_result($total);
// Leer consulta
$smCuenta->fetch();
$smCuenta->close();

// Solo si se encontaron filas
if($total > 0) {
    // Actualizar total de páginas disponibles
    $data['pages'] = ceil($total / $elementos);
    // Calcular inicio de consulta
    $offset = ($pagina - 1) * $elementos;
    // Incluye todos los campos necesarios
    $consulta = "SELECT idCliente, nomCliente, tipoCliente FROM cliente $filtro LIMIT $offset, $elementos";
    $smCliente = $con->prepare($consulta);
    if(count($filtros) > 0) {
        $smCliente->bind_param($tipos, ...$valores);
    }
    $smCliente->execute();
    $smCliente->store_result();
    $smCliente->bind_result($idCliente, $nomCliente, $tipoCliente);
    // Recorrer resultados
    while($smCliente->fetch()) {
        // Insertar datos en arreglo
        $data['clientes'][] = [
            'idCliente' => $idCliente,
            'nomCliente' => $nomCliente,
            'tipoCliente' => $tipoCliente
        ];
    }
    $smCliente->close();
}
// Devolver arreglo con total de páginas y filas encontradas
echo json_encode($data);

En este ejemplo solo se agregaron dos opciones para filtrar, pero fácilmente puedes agregar más:

  1. Crea el campo en HTML
  2. En Javascript escucha los cambios para llamar a la función loadAjax()
  3. En la función agrega el campo y su valor en los parámetros de la petición
  4. En PHP crea la variable correspondiente y analiza para agregar a las variables para filtros, tipos y valores
  5. Si requieres más columnas para la tabla:
  • Modifica la tabla HTML para agregar la columna
  • En Javascript modifica la función drawTable() para mostrar esa columna
  • En PHP modifica la consulta, junto con ->bind_result() y agrega el dato en el arreglo
1
  • Puedes migrar la repuesta a esta nueva pregunta es.stackoverflow.com/questions/446890/… ya que fue ilegal dar una recompensa y cambiar el código de esta respuesta, quiero conservar la mismo estilo de mostrar datos i.imgur.com/B2vazDz.png, pero lo podemos hacer lo más simple posible en el tema del código ajax, he usado algunos ejemplos de su respuesta. Saludos!
    – J. Mick
    Commented el 24 abr. 2021 a las 19:52

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.