Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

PAGINACION TABLA 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;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 15px;
  margin-top: 15px;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}


tr:nth-child(even) {background-color: #f2f2f2;}


th {
  background-color: black;
  color: white;
}


input{
  height: 25px;
  border: 1px solid #9b9b9b;
  border-radius: 8px;
}

button {
background-color: white; 
color: black; 
border: 2px solid #4CAF50;
text-align: center;
border-radius: 8px;
margin: 4px 2px;
}

</style>


</head>
<body>

<div id="marco" 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="marco2" style="border: 1px solid #ddd;padding: 10px;border-radius: 10px;">

    <table id="articulosTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody id="articulosBody">
     
        </tbody>
    </table>

</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>


</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;
          updateTable(data.items);
          updatePagination();
        });
}

// Función para actualizar la tabla con los datos
function updateTable(items) {
   
  let row = '';

    items.forEach(item => {
     
        row += `

         <tr>

            <td>${item.id}</td>
            <td>${item.nombre}</td>
            <td>${item.precio}</td>

        </tr>

        `;
    });

document.getElementById("articulosBody").innerHTML = row;


}

// Función para actualizar la paginación
function updatePagination() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
  
//prevBtn.disabled = pagina_actual === 1;
//nextBtn.disabled = pagina_actual * registros_x_pagina >= totalItems;


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']) : 3;
$nombre = isset($_GET['nombre']) ? $_GET['nombre'] : '';

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

$sql = "SELECT * FROM articulos 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 articulos";
$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