Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

PAGINACION GALERIA C/BOTON ANT - SIG Y BUSCAR ARTICULO C/FETCH GET API JSON PHP MYSQL JS

el

 

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paginación de Artículos</title>
<style>
body {
font-family: 'Courier New';    
margin:auto 0;
}
input{
height: 25px;
border: 2px solid #ddd;
border-radius: 8px;
}
button {
background-color: white; 
color: black; 
border: 2px solid #4CAF50;
text-align: center;
border-radius: 8px;
margin: 4px 2px;
}
.marco {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 5px auto;
width: 100%;
height: auto;
border: 1px solid rgba(0,0,0,0.04);
/*border: 1px solid blue;*/
}
.card {
width: auto;
max-height: 330px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border: 1px solid rgba(0,0,0,0.04);
/*border: 1px solid rgba(0,0,0,0.04);*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*border: 1px solid red;*/
}
.card:hover{
transform: translateY(-5px);
}
.textdiv{
width: 280px; /*  aqui se calibra */
height: 50px;
/*border: 1px solid green;*/
border: 1px solid rgba(0,0,0,0.04);
padding:10px;
background-color: #F5F5F5;
}
img {
width: 240px;
height: 240px;
object-fit: contain;
object-position: center;
/*border: 1px solid green;*/
}
.imgdiv{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="marco1" style="margin: 30px 0px 5px 0px;border: 1px solid #ddd;padding: 20px;border-radius: 10px;">
<label for="">Buscar Nombre</label>  
<input type="text" id="nombre" autocomplete="off" value="">
<button id="botonbuscar">Buscar</button>
</div>
    <div id="pagination" style="border: 1px solid #ddd;padding: 10px;border-radius: 10px;margin-top: 5px;">
        <button id="prevBtn" onclick="anterior()">Anterior</button>
        <button id="nextBtn" onclick="siguiente()">Siguiente</button>
    </div>
<div id='cargargaleria'></div>
</body>
</html>
<script>
document.getElementById('nombre').addEventListener('keyup', function () {
let pagina_actual = 1;
cargarItems(pagina_actual);
});
document.getElementById('botonbuscar').addEventListener('click', function () {
let pagina_actual = 1;
cargarItems(pagina_actual);
});
/*
document.getElementById('nombre').addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
let pagina_actual = 1;
cargarItems(pagina_actual);
}
});
*/
const registros_x_pagina = 3;  // Número de artículos por página
let pagina_actual = 1;    // Página actual
let totalItems = 0;    // Total de artículos en la base de datos
// Función para cargar datos desde la API
function cargarItems(pagina) {
   
var nombre = document.getElementById('nombre').value;
    fetch(`api_json.php?pagina=${pagina}&registros_x_pagina=${registros_x_pagina}&nombre=${nombre}`)
        .then(response => response.json())
        .then(data => {
          console.log(data);
          totalItems = data.totalItems;
          updateGaleria(data.items);
          updatePagination();
        });
}

// Función para actualizar la tabla con los datos
function updateGaleria(items) {
  
let gal = '';
gal += `<div class="marco">`;
items.forEach(item => {
     
gal += `
<div class='card'>
<div class='imgdiv'>
 <img src='fotos/${item.fotos}' >
</div>
<div class='textdiv'>
         
<article style="border-radius: 10px;padding: 3px 3px;border: 1px solid blue;background-color: #F5F5F5;color:blue;font-weight:bold;margin-bottom:5px;">${item.nombre} </article>
<article style="border-radius: 10px;padding: 3px 3px;border: 1px solid red;background-color: #F5F5F5;color:red;width:90px;font-weight:bold;">$ ${item.precio} </article>
</div>
</div>
`;

});

gal += `</div>`; // fin de gal += `<div class="marco">`;
document.getElementById("cargargaleria").innerHTML = gal;
}

// Función para actualizar la paginación
function updatePagination() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
  prevBtn.style.display = (pagina_actual === 1) ? 'none' : 'block';
nextBtn.style.display = (pagina_actual * registros_x_pagina >= totalItems) ? 'none' : 'block';
}
// Función para ir a la página anterior
function anterior() {
    if (pagina_actual > 1) {
        pagina_actual--;
        cargarItems(pagina_actual);
    }
}
// Función para ir a la página siguiente
function siguiente() {
    if (pagina_actual * registros_x_pagina < totalItems) {
        pagina_actual++;
        cargarItems(pagina_actual);
    }
}
// Cargar datos iniciales
cargarItems(pagina_actual);
</script>


//////////////////////

api_json.php

<?php

$host = "localhost";
$dbname = "tienda";
$username = "root";
$password = "root";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->exec("set names utf8");

} catch (PDOException $e) {
    die("Error en la conexión a la base de datos: " . $e->getMessage());
}


$pagina = isset($_GET['pagina']) ? intval($_GET['pagina']) : 1;
$registros_x_pagina = isset($_GET['registros_x_pagina']) ? intval($_GET['registros_x_pagina']) : 6;
$nombre = isset($_GET['nombre']) ? $_GET['nombre'] : '';


$indice_inicio= ($pagina - 1) * $registros_x_pagina;

$sql = "SELECT * FROM productos WHERE nombre LIKE '%{$nombre}%' LIMIT $indice_inicio, $registros_x_pagina";

$stmt = $pdo->query($sql);
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);


$sql = "SELECT COUNT(*) as total FROM productos";
$stmt = $pdo->query($sql);
$totalItems = $stmt->fetch(PDO::FETCH_ASSOC)['total'];

$response = [
    'items' => $items,
    'totalItems' => $totalItems
];

echo json_encode($response);

header('Content-Type: application/json');

//////////////////////


Comentarios

Publicar un comentario