[Javascript] Eliminar elementos seleccionados de una tabla con PHP y MySQL
Vamos a eliminar elementos seleccionados de una tabla usando ajax, los datos estarán cargados en una base de datos MySQL.
Este ejemplo sirve para todo tipo de proyectos donde tenemos que eliminar varios items y eliminar de uno en uno es muy difícil.
Código
En el ejemplo tenemos básicamente 5 archivos.
- schema.sql: contiene la estructura de la base de datos, solo es una tabla
- index.php: es el archivo principal y contenedor.
- connect.php: contiene la conexión a la base de datos
- getproducts.php: aqui se muestran todos los productos (de este archivo hablaremos en detalle)
- delproduct.php: obtiene los ids y elimina los productos
Vamos a hablar principalmente del archivo getproducts.php ya que contiene las piezas jquery y javascript que vamos a utilizar. El resto de codigo PHP es el mismo para la mayoria de cosas, como obtener los datos de la base de datos y mostrarlos.
A continuacion el codigo en un hist de github.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Incluimos el archivo de conexion a la base de datos | |
| include "connect.php"; | |
| // La siguiente es la consulta para obtener los productos de la BD | |
| $sql = "select * from product"; | |
| // Nos conectamos a la BD | |
| $con = connect(); | |
| // Ejecutamos la consulta SQL | |
| $query = $con->query($sql); | |
| // Hacemos un recorrido de los resultados y guardamos todo en la variable DATA | |
| $data = array(); | |
| while($r = $query->fetch_object()){ | |
| $data[] = $r; | |
| } | |
| ?> | |
| <?php | |
| // Si los elementos de la variable data son > 0 | |
| if(count($data)>0):?> | |
| <button id="selall">Seleccionar todo</button> | |
| <button id="delselected">Eliminar seleccionados</button> | |
| <br><br> | |
| <table border="1"> | |
| <thead> | |
| <th></th> | |
| <th>Nombre</th> | |
| <th>Precio</th> | |
| </thead> | |
| <?php | |
| // Hacemos un reccorrido de la variable data | |
| foreach($data as $d):?> | |
| <tr> | |
| <td> | |
| <input type="checkbox" id="product-<?php echo $d->id; ?>" class="check"> | |
| </td> | |
| <td><?php echo $d->name; // Nombre del producto ?></td> | |
| <td><?php echo $d->price;// Precio del producto ?></td> | |
| </tr> | |
| <?php endforeach; ?> | |
| </table> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $("#selall").click(function(){ | |
| // Obtenenos los ids de todos los elementos | |
| checks = document.querySelectorAll(".check"); | |
| if(checks.length>0){ | |
| for(i=0;i<checks.length;i++){ | |
| checks[i].checked=true; | |
| } | |
| } | |
| }); | |
| $("#delselected").click(function(){ | |
| // Obtenenos los ids de los elementos que esten seleccionados "checked" | |
| checks = document.querySelectorAll(".check:checked"); | |
| // Verificamos que la cantidad de elementos seleccionados sea mayor a 0 (cero) | |
| if(checks.length>0){ | |
| // Si hay elementos seleccionados | |
| // Le preguntamos al usuario si esta seguro de eliminar | |
| x = confirm("Estas seguro de eliminar "+checks.length+" elemento(s) ?"); | |
| if(x){ | |
| // Si el usuario esta seguro, procedemos | |
| // la variable ids contiene los IDs de los elementos seleccionados | |
| ids = ""; | |
| // En el siguiente ciclo vamos a recorrer los elementos seleccionamos y guardaremos los IDs separados por comas (,) en la variable ids | |
| for(i=0;i<checks.length;i++){ | |
| // Los ids de los productos estan en los checkbox como "producto-ID" entonces tenemos que hacer SPLIT y despues usar el elemento [1] que es el ID, el elemento [0] es "product" | |
| p = checks[i].id.split("-"); | |
| // agregamos el ID a la variable ids | |
| ids += p[1] + ","; | |
| } | |
| // En la siguiente funcion AJAX vamos a enviar los IDS al archivo delproduct.php | |
| $.get("delproduct.php","ids="+ids,function(d){ | |
| // Una vez finalizada la eliminacion procedemos a recargar los productos de nuevo. | |
| $.get("getproducts.php","",function(data){ | |
| $("#products").html(data); | |
| }); | |
| }); | |
| } | |
| }else{ | |
| // Si no hay elementos seleccionados | |
| alert("No hay productos seleccionados"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <?php else:?> | |
| <p>No hay productos</p> | |
| <?php endif; ?> |
He agregado comentarios al archivo para mejorar su comprensión, en cada linea esta especificado lo que estamos haciendo.
Resultado
El resultado es el siguiente. El ejemplo es sencillo pero sirve para ejemplificar ;).
Descargar
A continuación les dejo los archivos completos para descargar.
[sociallocker]Link: https://drive.google.com/file/d/1VJHeS2N_awYT8dAqqPCn6toXMy7MVh05/view?usp=sharing
[/sociallocker]Instalación
Para instalar el ejemplo deben hacer lo siguiente:
- Descargar y descomprimir los archivos
- Guardarlos en su carpeta “htdocs”
- Entrar a la base de datos desde PHPMyAdmin o desde la terminal y agregar el contenido del archivo schema.sql
- Entrar al ejemplo desde el navegador usando la carpeta donde la guardaron ejemplo http://localhost/multipledel-php1
Dudas y comentarios?