Skip to main content
Mejoras de formato
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42

Luego teTambien he actualizado un pocomodernizado el código AJAX.

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

En mi ejemplo he usado la página test1.php, la debes cambiar por la tuya pagination.phpBase de Datos y también use mi BD, con lo cual, tendrás que poner tus nombres de tabla y columnas.

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');
<!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'var query_paramsquery_params')
    //
    // Amount
    $('#amount_show').change(function(evt) { // change / click(function()
        evt.preventDefault();      
        ajaxLoad('test1'pagination.php');
    });

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

    // Buscador
   $( "input[type='text']#buscador_show" ).change(function(evt) {
        evt.preventDefault(); 
        var txt = $(this).val();  
        console.log(txt);
        ajaxLoad('test1'pagination.php');
    });
    
    // Cargar contenido dinamico
    function ajaxLoad(url) {            
       
        // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a utu 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>
<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 = 'test1'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 'amount''fecha'. si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT titleidCliente,
                                    subtitlenomCliente
                            FROM tutorialcliente
                            WHERE DATE(date_publicdateMember) = ?
                            ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos porsolo 'amount'por si'palabra' existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT titleidCliente,
                                    subtitlenomCliente
                            FROM tutorialcliente
                            WHERE titlenomCliente LIKE ?
                                  
                            ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT titleidCliente,
                                    subtitlenomCliente
                            FROM tutorialcliente
                            WHERE DATE(date_publicdateMember) = ? AND titlenomCliente LIKE ?
                                  
                            ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT titleidCliente,
                                    subtitlenomCliente
                            FROM tutorialcliente
                            ORDER BY ident_tutorialidCliente 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 tutorialcliente WHERE DATE(date_publicdateMember) = ?");
        $stmtPD->bind_param('s', $fecha_sql);

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

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

      // Default sin filtro
      else :
        $stmtPD = $con->prepare("SELECT * FROM tutorial"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>

Luego te he actualizado un poco el código AJAX.

$.ajax({ por var request = $.ajax({

En mi ejemplo he usado la página test1.php, la debes cambiar por la tuya pagination.php y también use mi BD, con lo cual, tendrás que poner tus nombres de tabla y columnas.

<!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) { // change / click(function()
        evt.preventDefault();      
        ajaxLoad('test1.php');
    });

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

    // Buscador
   $( "input[type='text']#buscador_show" ).change(function(evt) {
        evt.preventDefault(); 
        var txt = $(this).val();  
        console.log(txt);
        ajaxLoad('test1.php');
    });
    
    // Cargar contenido dinamico
    function ajaxLoad(url) {            
       
        // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a u 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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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 tutorial WHERE DATE(date_public) = ?");
        $stmtPD->bind_param('s', $fecha_sql);

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

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

      // Default sin filtro
      else :
        $stmtPD = $con->prepare("SELECT * FROM tutorial");
      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>

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');
<!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>
<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>
Mejoras de formato
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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">';
        
          // NOTA:Contamos Estaregistros partea delmostrar 'SELECT'paginación aunsegún haylos quefiltros adaptarseseleccionados
 a los nuevos filtros cargados y obtener sus paginas//
 correspondiente, parecido como hemos hecho arriba para llamar// aFiltramos lospor datosfecha
 MySQL. Es decir,    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') :
        $stmtPD //= $con->prepare("SELECT * FROM tutorial WHERE DATE(date_public) = ?");
        $stmtPD->bind_param('s', $fecha_sql);

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

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

      // ETC..Default sin filtro
      else :
        $stmtPD = $con->prepare("SELECT * FROM tutorial");
      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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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">';
        
          // NOTA: Esta parte del 'SELECT' aun hay que adaptarse a los nuevos filtros cargados y obtener sus paginas correspondiente, parecido como hemos hecho arriba para llamar a los datos MySQL. Es decir,
         // WHERE date_public =?
        // title LIKE ?
       // ETC..
        $stmtPD = $con->prepare("SELECT * FROM tutorial");

        $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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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 tutorial WHERE DATE(date_public) = ?");
        $stmtPD->bind_param('s', $fecha_sql);

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

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

      // Default sin filtro
      else :
        $stmtPD = $con->prepare("SELECT * FROM tutorial");
      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>
Mejoras de formato
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
<!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) { // change / click(function()
        evt.preventDefault();      
        ajaxLoad('test1.php');
    });

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

    // Buscador
   $( "input[type='text']#buscador_show" ).change(function(evt) {
        evt.preventDefault(); 
        var txt = $(this).val();  
        console.log(txt);
        ajaxLoad('test1.php');
    });
    
    // Cargar contenido dinamico
    function ajaxLoad(url) {            
       
        // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a u 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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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">';
        
          // NOTA: Esta parte del 'SELECT' aun hay que adaptarse a los nuevos filtros cargados y obtener sus paginas correspondiente, parecido como hemos hecho arriba para llamar a los datos MySQL. Es decir,
         // WHERE date_public =?
        // title LIKE ?
       // ETC..
        $stmtPD = $con->prepare("SELECT * FROM tutorial");
 
        $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>
<!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) { // change / click(function()
        evt.preventDefault();      
        ajaxLoad('test1.php');
    });

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

    // Buscador
   $( "input[type='text']#buscador_show" ).change(function(evt) {
        evt.preventDefault(); 
        var txt = $(this).val();  
        console.log(txt);
        ajaxLoad('test1.php');
    });
    
    // Cargar contenido dinamico
    function ajaxLoad(url) {            
       
        // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a u 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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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">';

        $stmtPD = $con->prepare("SELECT * FROM tutorial");
        $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>
<!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) { // change / click(function()
        evt.preventDefault();      
        ajaxLoad('test1.php');
    });

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

    // Buscador
   $( "input[type='text']#buscador_show" ).change(function(evt) {
        evt.preventDefault(); 
        var txt = $(this).val();  
        console.log(txt);
        ajaxLoad('test1.php');
    });
    
    // Cargar contenido dinamico
    function ajaxLoad(url) {            
       
        // Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a u 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>
<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 = 'test1.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 por 'amount' si existe, y 'fecha'.
    // 
    if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ?
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $fecha_sql);

    // Filtramos por 'amount' si existe, y por 'palabra'
    //
    } elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('s', $txt);    

    // Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
    //
    } elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
        // SQL 
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            WHERE DATE(date_public) = ? AND title LIKE ?
                                  
                            ORDER BY ident_tutorial DESC LIMIT $localization_sql, $records_by_page");
        $stmtPD->bind_param('ss', $fecha_sql,$txt);
    // Filtro por defecto
    //
    } else { 
        // SQL
        $stmtPD = $con->prepare("SELECT title,
                                    subtitle
                            FROM tutorial
                            ORDER BY ident_tutorial 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">';
        
          // NOTA: Esta parte del 'SELECT' aun hay que adaptarse a los nuevos filtros cargados y obtener sus paginas correspondiente, parecido como hemos hecho arriba para llamar a los datos MySQL. Es decir,
         // WHERE date_public =?
        // title LIKE ?
       // ETC..
        $stmtPD = $con->prepare("SELECT * FROM tutorial");
 
        $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>
Origen Enlace
D.Bulten
  • 6.6k
  • 2
  • 25
  • 42
Loading