Eliminar elementos seleccionados con Js, PHP y MySQL

Sep 2, 2019Sep 2, 2019 Agustin Ramos

Muchos programas y sistemas tienen la opción para eliminar elementos seleccionados, un ejemplo seria gmail, donde puedes seleccionar los correos que quieres eliminar.

Este ejemplo esta integrado en un proyecto llamado multiact-one, el hecho de llamarlo multiact es por que una vez entendiendo el funcionamiento es facil o relativamente facil hacer cualquier acción con los elementos seleccionados.

En el siguiente video se muestra la instalación y funcionamiento del proyecto.

Les invito a que se suscriban a mi canal de Youtube estamos camino a 3mil suscriptores y queremos llegar a 10mil, me ayudan? https://youtube.com/evilnapsis/

Ahora explicare los 2 bloques de codigo mas importantes, el primero es la tabla donde se muestran los datos.

	<a href="index.php?view=index&opt=new" class="btn btn-default"><i class='glyphicon glyphicon-user'></i> Nuevo</a>
	<a href="javascript:void()" id="selectedall" class="btn btn-default"><i class='glyphicon glyphicon-th-list'></i> Seleccionar todos</a>
	<a href="javascript:void()" id="delselected" class="btn btn-default"><i class='glyphicon glyphicon-remove'></i> Eliminar seleccionados</a>
	<br><br>
	<?php
	$users = UserData::getAll();
	if(count($users)>0){
	?>
	<div class="box box-primary">
	<table class="table table-bordered datatable table-hover">
	<thead>
	<th>
	</th>
	<th>Nombre completo</th>
	<th>Nombre de usuario</th>
	<th></th>
	</thead>
	<?php
	foreach($users as $user){
	?>
	<tr id="tr_<?php echo $user->id; ?>"> <!– Agregamos el ID del usuario en el ID del elemento TR –>
	<td style="width: 30px; ">
	<input type="checkbox" id="item_<?php echo $user->id; ?>" class="myitem"> <!– Agreamos el ID del usuario en el ID del check, ademas una clase –>
	</td>
	<td><?php echo $user->name." ".$user->lastname; ?></td>
	<td><?php echo $user->username; ?></td>
	<td style="width:120px;">
	<a href="index.php?view=index&opt=edit&id=<?php echo $user->id;?>" class="btn btn-warning btn-xs">Editar</a>
	<a href="index.php?action=users&opt=del&id=<?php echo $user->id;?>" class="btn btn-danger btn-xs">Eliminar</a>
	</td>
	</tr>
	<?php

	}
	echo "</table></div>";

	}else{
	?>
	<p class="alert alert-warning">No hay usuarios.</p>
	<?php
	}
	?>

view raw table-index-view.php hosted with ❤ by GitHub

Les explico (La explicación esta basada en el Gist, en el archivo original los números de linea son relativos).

Linea 1: Botón de nuevo
Linea 2: Botón de seleccionar todos
Linea 3: Botón Eliminar seleccionados
Linea 6: Obtener todos los usuarios
Linea 19: Empieza el ciclo para recorrer los usuarios
Linea 21: Agregamos el Id a cada TR para saber a que usuario corresponde
Linea 23: Agregamos un checkbox con el ID del usuario o elemento para seleccionarlo y saber que elemento vamos a eliminar.
Linea 24: Termina el ciclo

Ahora en el siguiente bloque de código javascript tenemos las funciones para seleccionar todos y eliminar seleccionados.

	$("#selectedall").click(function(e){ // Funcion para seleccionar todos
	e.preventDefault();
	var elements = document.getElementsByClassName("myitem"); // Obtenemos los elementos checkbox
	for(var i=0;i<elements.length;i++){ // Recorremos los elementos
	elements[i].checked = true; // Hacemos TRUE los elementos, para que se activen los checkboxes
	}
	}); // Termina la funcion para seleccionar todos



	$("#delselected").click(function(e){ // Funcion para eliminar los elementos seleccionados
	e.preventDefault();
	var elements = document.getElementsByClassName("myitem"); // Obtenemos los elementos checkbox
	var checkeds = []; // Creamos un arrar para guardar los ID de los elementos seleccionados

	for(var i=0;i<elements.length;i++){ // Recorremos todos los checkbox
	if(elements[i].checked){ // Si elemento esta seleccionado o checked vamos a guardar el ID en el array checkeds
	checkeds.push(elements[i].id); // Agregamos el ID al array checkeds
	}

	}

	if(checkeds.length>0){ // Si los elementos seleccionados son mas de 0

	for(var i=0; i < checkeds.length; i++){ // Recorremos los elementos seleccionados
	var s = checkeds[i].split("_"); // Dividimos el ID que viene como item_ID para obtener el ID del elemento en la base de datos

	$.get("./?action=users&opt=del&id="+s[1],"", function(da){ }); // Ejecutamos la URL para eliminar y pasamos como parametro el ID del elemento en la BD
	$("#tr_"+s[1]).remove(); // Eliminamos el elemento TR que tiene el ID del elemento
	}

	}else{ // Si no hay elementos seleccionados
	alert("No hay elementos seleccionados!");
	}
	}); // Termina la funcion para eliminar los elementos seleccioandos

view raw script-index-view.js hosted with ❤ by GitHub

Para entender mas fácil agregue comentarios en cada linea.

Descargar

Puedes descargar el ejemplo usando el siguiente enlace:

Link: http://eunsetee.com/11227357/multiact1

Para descargar debes hacer click, esperar 5 segundos y después hacer click en “Saltar Publicidad” en el botón Amarillo en la esquina superior derecha.

En el vídeo les muestro como instalar y usar el proyecto.

Conclusión

Es posible insertar cualquier tipo de acciones que se pueden ejecutar a los elementos seleccionados, algunas pueden ser por ejemplo: cambio de estatus, enviar por email, ocultar, entre otras.

Espero este ejemplo les sirva para sus proyectos personales o laborales. Saludos