Consulta en tiempo real de tabla hecha por php

publicado por: Anonymous

Tengo una tabla creada en HTML con PHP y MySQL, y necesito que con un input haga una búsqueda en tiempo real de esa misma tabla, ¿se podrá?

Aqui el código:

Cuerpo de la página:

<div id="main">
            <div id="header">
                <div id="headerText"><?php 
                if (isset($_GET['equipo'])){
                    echo $_GET['equipo'];
                }elseif (isset($_GET['marca'])){
                    echo $_GET['marca'];
                }
            ?>
                </div>
            </div>
            <div id="content">
                <input type="text" name="consulta" id="consulta" placeholder="Busque por codigo, nombre, presentacion, detalle">
                <div id="resultado"></div>
                <div id="contenido">
                    <table class="table-fill">
                        <thead>
                            <?php if(isset($_GET['equipo'])){
                            ?>
                            <tr>
                                <th>Codigo</th>
                                <th>Descripcion</th>
                                <th>Marca</th>
                                <th>Presentacion</th>
                                <th>Detalle</th>
                                <th>Cantidad</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="buscarTabla">
                            <?php

                                while($item = $consulta->fetch_assoc())
                                {
                                ?>
                                    <tr>
                                        <form action="buscar.php" method="post">
                                        <td><input type="hidden" name="codigo" id="codigo" value="<?php echo $item['codRef'];?>"><?php echo $item['codRef'];?></td>
                                        <td><input type="hidden" name="descripcion" id="descripcion" value="<?php echo $item['descripcion'];?>"><?php echo $item['descripcion'];?></td>
                                        <td><input type="hidden" name="marca" id="marca" value="<?php echo $item['marca'];?>"><?php echo $item['marca'];?></td>
                                        <td><input type="hidden" name="present" id="present" value="<?php echo $item['present'];?>"><?php echo $item['present'];?></td>
                                        <td><input type="hidden" name="detalle" id="detalle" value="<?php echo $item['detalle'];?>"><?php echo $item['detalle'];?></td>
                                        <td><input type="text" name="cantidad" id="cantidad" placeholder="0"></td>
                                        <td><button id="btnAgregar">Agregar</button></td>
                                    </form>
                                    </tr>
                        </tbody>
                                <?php 
                                }
                            }elseif (isset($_GET['marca'])) {?>
                        <thead>
                                <tr>
                                <th>Codigo</th>
                                <th>Descripcion</th>
                                <th>Equipo</th>
                                <th>Presentacion</th>
                                <th>Detalle</th>
                                <th>Cantidad</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="buscarTabla">
                            <?php

                                while($item = $consulta->fetch_assoc())
                                {
                                ?>
                                    <tr>
                                        <form action="buscar.php" method="post">
                                        <td><input type="hidden" name="codigo" id="codigo" value="<?php echo $item['codRef'];?>"><?php echo $item['codRef'];?></td>
                                        <td><input type="hidden" name="descripcion" id="descripcion" value="<?php echo $item['descripcion'];?>"><?php echo $item['descripcion'];?></td>
                                        <td><input type="hidden" name="equipo" id="equipo" value="<?php echo $item['equipo'];?>"><?php echo $item['equipo'];?></td>
                                        <td><input type="hidden" name="present" id="present" value="<?php echo $item['present'];?>"><?php echo $item['present'];?></td>
                                        <td><input type="hidden" name="detalle" id="detalle" value="<?php echo $item['detalle'];?>"><?php echo $item['detalle'];?></td>
                                        <td><input type="text" name="cantidad" id="cantidad" placeholder="0"></td>
                                        <td><button id="btnAgregar">Agregar</button></td>
                                    </form>
                                    </tr>
                                <?php 
                                }
                            }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

solución

Si puedes hacerlo con JS.

Si empiezas con JS te podría recomendar jQuery, haces un Ajax a la base de datos (si es que requieres de la base de datos), o simplemente verifica el contenido de las tablas con filtros.

  1. Aqui te dejo un sencillo ejemplo de como hacer el filtro sin recurrir a la BD
  2. Tambien podrías interesarte por otros Frameworks como VueJS o React o Angular
  3. Aqui te dejo otro ejemplo, de jQuery vs VueJS para filtros.

Espero que te funcione.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *