Eliminar múltiples registros con PHP – MySQLi – jQuery

En este tutorial intentaremos crear una Eliminar múltiples registros con PHP – MySQLi – jQuery . jQuery es una framework rápido y confiable de javascript . Está diseñado para simplificar la forma tradicional de codificación en javascript.

En un tutorial anterior ya habíamos  visto como eliminar múltiples registros de la base de datos, pero hemos querido mejorar dicho código haciendo funcionar con jQuery y AJAX, lo que hace que lo datos sean eliminados en tiempo real. Si deseas hechar un vistazo a tutorial puedes hacerlo en enlace siguiente: Eliminar múltiples registros con PHP & MySQLi

Antes de comenzar:
primero tiene que descargar e instalar XAMPP o cualquier servidor local que ejecute scripts PHP. Aquí está el enlace para el servidor XAMPP https://www.apachefriends.org/es/index.html

Una vez hayas instalado xampp, debes abrir el navegador web y colocar en la barra de direcciones así: http://localhost/phpmyadmin/, esto abrirá el gestor de bases de datos phpMyAdmin, ahora procede a crear una base de datos, para este ejemplo la hemos nombrado “test_delete_query”

Una vez crada la base de datos debes dirigirte a la pestaña “Importar”, luego buscar el archivo “test_delete_query” que se encuentra dentro del directorio Database en nuestro proyecto principal, luego procede con la importación de datos.  

Creación de la conexión de la base de datos
Hemos nombrado al archivo que se encarga de conectar a la  base de datos como: connect.php,  simplemente copia y pega el código proporcionado a continuación.

<?php
	$conn = new mysqli("localhost", "root", "", "test_delete_query");
	if(!$conn){
		die("Fatal Error: Conexión Falló!");	
	}
?>

La interfaz principal
Aquí es donde se listan los datos previamente almacenados en la base de datos, simplemente copia y pega el código proporcionado a continuación. Nombraremos al archivo index.php

<!DOCTYPE html>
<?php require 'connect.php' ?>

<html lang = "en">
	<head>
		<title>Eliminar múltiples registros con PHP - MySQLi - jQuery</title>
		<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
		<link rel = "stylesheet" type = "text/css" href = "css/jquery.dataTables.css"/>
	</head>
<body>
	<nav class = "navbar navbar-default">
		<div class = "container-fluid">
			<a class = "navbar-brand" href = "http://facturacionweb.site/blog">Facturación Web</a>
		</div>
	</nav>
	<div class = "col-md-3"></div>
	<div class = "col-md-6 well">
		<h3 class = "text-primary">Eliminar múltiples registros con PHP - MySQLi - jQuery</h3>
		<hr style = "border-top:1px dotted #000;"/>
		<button class = "btn btn-sm btn-danger pull-right" id = "btn_modal"  data-toggle="modal" data-target="#myModal"><span class = "glyphicon glyphicon-remove"></span> ELIMINAR</button>
		<br /><br />
		<table id = "table" class = "table table-bordered">
			<thead>
				<tr>
					<th>ID</th>
					<th>Nombres</th>
					<th>Apellidos</th>
					<th>Dirección</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<?php
					$query = $conn->query("SELECT * FROM `student`");
					while($fetch = $query->fetch_array()){
						echo '
						<tr id = "'.$fetch['id'].'">
							<td>'.$fetch['student_id'].'</td>
							<td>'.$fetch['firstname'].'</td>
							<td>'.$fetch['lastname'].'</td>
							<td>'.$fetch['address'].'</td>
							<td><input type = "checkbox" name = "student_id[]" class = "delete_student" value = "'.$fetch['id'].'"></td>
						</tr>
					';						
					}
				?>
			</tbody>
		</table>
	</div>
	
	



<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
       <h4 class = "text-primary">¿Seguro que quieres borrar todos los registros?</h4>
      </div>
      <div class="modal-body">
		<div id = "result"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id = "btn_delete" data-dismiss="modal">Si</button>
		<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
      </div>
    </div>

  </div>
</div>

</body>
<script src = "js/jquery-3.2.1.js"></script>
<script src = "js/jquery.dataTables.js"></script>
<script src = "js/bootstrap.js"></script>
<script src = "js/script.js"></script>
<script type = "text/javascript">
	$(document).ready(function(){
		$('#table').DataTable();
	});
</script>
</html>

El script de eliminación
El archivo delete.php, es el encargado de borrar los registros seleccionados de nuestra base de datos. El código es mostrado a continuación.

<?php
	require 'connect.php';
	
	if(ISSET($_POST['id'])){
		foreach($_POST['id'] as $id ){
			$conn->query("DELETE FROM `student` WHERE `id` = '".$id."'");
		}
	}
	
	
?>

El resultado
Aquí es donde se mostrarán los datos seleccionados antes de eliminar con éxito, dichos datos se cargan en una ventana modal de confirmación. Hemos nombrado este archivo como result.php

<?php
	require 'connect.php';
	
	if(ISSET($_POST['id'])){
		foreach($_POST['id'] as $id ){
			$query = $conn->query("SELECT * FROM `student` WHERE `id` = '".$id."'");
			$fetch = $query->fetch_array();
			echo '	
				<h4 class = "alert-danger">'.$fetch['student_id'].' '.$fetch['firstname'].' '.$fetch['lastname'].' '.$fetch['address'].'</h4>
			';
		}
	}
?>

El script principal
Aquí es donde se ejecuta la eliminación multiple, este archivo es el encargado de gestionar las peticiones al servidor haciendo uso de jQuery. La casilla de verificación seleccionada mostrará los datos y luego solicitará al usuario la confirmación del borrado de los datos. Hemos nombrado dicho archivo como script.js, y se encuentra dentro del directorio llamado js en nuestro proyecto principal.

$(document).ready(function(){
	
	$('#btn_modal').on('click', function(){
		var id = [];
		
		$('.delete_student:checked').each(function(i){
			id[i] = $(this).val();		
		});
		
		if(id.length == 0){
			$('#result').html("");
			
		}else{
			$.ajax({
				url: 'result.php',
				method: 'POST',
				data: {id: id},
				success: function(data){
					$('#result').html(data);
					
				}
			});
		}	
	});
	
	$('#btn_delete').on('click', function(){
		var id = [];
		
		$('.delete_student:checked').each(function(i){
			id[i] = $(this).val();		
		});
		
		if(id.length == 0){
			alert("Selecciona al menos un registro");
			
		}else{
			$.ajax({
				url: 'delete.php',
				method: 'POST',
				data: {id: id},
				success: function(){
					for(var i = 0; i < id.length; i++){
						$('tr#'+id[i]+'').css('background-color', '#ff0000');
						$('tr#'+id[i]+'').fadeOut(1000);
					}
					
				}
			});
		}	
	});
});

Cabe mencionar que para el desarrollo de este tutorial también se ha hecho uso del plugins datatables de jQuery, ademas hemos hecho uso de Framework CSS Bootstrap. Todos los archivos fuentes utilizados en este tutorial los podrás descargar a continuación.