Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

PAGINACION CON BUSCADOR SOBRE TABLA CON PHP MYSQL JQUERY AJAX API JSON BOOTSTRAP 5

el




 index.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Paginación con buscador</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>


<div class="container">



<div class="card">

  <div class="card-body">


 <div class="form-group">

    <input type="text" class="form-control" id="buscador" placeholder="Ingrese nombre y pulser enter">

  </div>


<hr>


  <table class="table table-striped">

    <thead>

      <tr>

        <th>Nombre</th>

        <th>Precio</th>

        <th>Foto</th>

      </tr>

    </thead>

    <tbody></tbody>

  </table>


  <div class="pagination">

    <button class="btn btn-anterior">Anterior</button>

    <button class="btn btn-siguiente">Siguiente</button>

  </div>


 

</div>

</div>


</div>


<script>


// Variables globales

var paginaActual = 1;

var registrosPorPagina = 4;



$(document).ready(function() {


  // Eventos para los botones de paginación

  $('.btn-anterior').click(function() {

    paginaActual--;

    cargarDatos();

   });


  $('.btn-siguiente').click(function() {

    paginaActual++;

    cargarDatos();

  });


  // Cargar los datos de la primera página

    cargarDatos();


$('#buscador').on('keyup', function(e) {

    // Comprobar si se ha pulsado la tecla enter

    if (e.keyCode === 13) {

     // Cargar los datos de la página actual

     cargarDatos();

    }

   });



});


/***************************************************/


// Función para cargar los datos

function cargarDatos() {

 

  // Enviar la petición AJAX

  $.ajax({

    url: 'paginar.php',

    method: 'POST',

    dataType: "json",

    data: {

      pagina: paginaActual,

      registros: registrosPorPagina,

      nombre: $('#buscador').val()

    },

    success: function(response) {

      // Procesar la respuesta y actualizar la tabla

      procesarRespuesta(response);


 // Comprobar si se ha llegado al final

   if (response.length === 0) {

    // Frenar el clic del botón siguiente

    $('.btn-siguiente').prop('disabled', true);

   } else {

    // Desbloquear el clic del botón siguiente

    $('.btn-siguiente').prop('disabled', false);

   }


   // Comprobar si se ha llegado al principio

   if (paginaActual === 1) {

    // Frenar el clic del botón anterior

    $('.btn-anterior').prop('disabled', true);

   } else {

    // Desbloquear el clic del botón anterior

    $('.btn-anterior').prop('disabled', false);

   }


    }

  });



}


/********************************************************/


// Función para procesar la respuesta

function procesarRespuesta(response) {

  // Limpiar el contenido de la tabla

  $('tbody').html('');


  // Agregar los nuevos datos a la tabla

  $.each(response, function(index, fila) {

    $('tbody').append(`

      <tr>


        <td>${fila.nombre}</td>

        <td>${fila.precio}</td>

        <td><img src="fotos/${fila.fotos}"  style="width:80px;"> </td>


      </tr>

    `);

  });

}


</script>


</body>

</html>


paginar.php (api json)


<?php


$pagina = isset($_POST['pagina']) ? intval($_POST['pagina']) : 1;

$registros = isset($_POST['registros']) ? intval($_POST['registros']) : 1;

$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : '';


//$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : 'ace';


//$pagina=1;

//$registros=2;

//$nombre='Yerba 1 kg';


// Función para paginar y buscar

function paginarYbuscar($pagina, $registros, $nombre) {

  // Obtener el número total de registros


// ... conexión a la base de datos ...  

$pdo = new PDO(

  'mysql:host=localhost;dbname=tienda',

  'root',

  'root'

);



  $sql = 'SELECT COUNT(*) AS total FROM productos WHERE nombre LIKE :nombre';

  $sentencia = $pdo->prepare($sql);

  $sentencia->bindParam(':nombre', $nombre, PDO::PARAM_STR);

  $sentencia->execute();

  $fila = $sentencia->fetch();

  $totalRegistros = $fila['total'];


  // Calcular el número de páginas

  $paginas = ceil($totalRegistros / $registros);


  // Obtener los datos de la página actual

  $sql = 'SELECT * FROM productos WHERE nombre LIKE :nombre LIMIT ' . $registros . ' OFFSET ' . ($pagina - 1) * $registros;

  $sentencia = $pdo->prepare($sql);


//$keynombre = "%".$nombre."%";

//$sentencia->bindParam(':nombre',$keynombre, PDO::PARAM_STR);


//alternativasssss


//$query->bindValue('keywords', '%' . $searchQ . '%');

//$q->bindValue(':keyword','%'.$keyword.'%');


$sentencia->bindValue(':nombre','%'.$nombre.'%', PDO::PARAM_STR);


$sentencia->execute();


  // Devolver los datos

  $datos = array();

  while ($fila = $sentencia->fetch()) {

    $datos[] = array(

      'id' => $fila['id'],

      'nombre' => $fila['nombre'],

      'precio' => $fila['precio'],

      'fotos' => $fila['fotos']

    );

  }


  return $datos;

}


// Obtener los datos

$datos = paginarYbuscar($pagina, $registros, $nombre);


// Enviar los datos como JSON

echo json_encode($datos);

?>



-------------------------------


Comentarios

Publicar un comentario