Añadir botones a una datatable de modificar y eliminar un registro
Bienvenidos a Vertutoriales.com, en esta ocasión vamos a ver como añadir un par de botones para poder modificar los registros mostrados en una datatable. En sí no se modifican al vuelo, pero sí vamos a generar estos botones para que llamen a la función que haga el resto.
En anteriores videotutoriales vimos como crear una datatable e incluso que esa datatable se cargue con información de una tabla de MySQL llamada desde PHP, todo esto por supuesto comunicándola haciendo una llamada AJAX y que devolvía un JSon que la datatable interpretaba… nada complejo 😉
Pero me habéis preguntado en varias ocasiones cómo añadir un par de botones para modificar esa información. En realidad es un pequeño «truco» que nos llevará unos minutos implementar.
Cuando estamos devolviendo el JSon generado por nuestro fichero PHP,
<?php
define("cServidor", "localhost");
define("cUsuario", "root");
define("cPass","");
define("cBd","rdpgestor");
$conexion = mysqli_connect(cServidor, cUsuario, cPass, cBd);
$consulta = "SELECT idImagen, idUsuario, nombre, extension, escala, tipo FROM imagenes";
$registro = mysqli_query($conexion, $consulta);
//guardamos en un array multidimensional todos los datos de la consulta
$i=0;
$tabla = "";
while($row = mysqli_fetch_array($registro))
{
$tabla.='{"idImagen":"'.$row['idImagen'].'","idUsuario":"'.$row['idUsuario'].'","nombre":"'.$row['nombre'].'","extension":"'.$row['extension'].'","escala":"'.$row['escala'].'","tipo":"'.$row['tipo'].'"},';
$i++;
}
$tabla = substr($tabla,0, strlen($tabla) - 1);
echo '{"data":['.$tabla.']}';
?>
Lo que hacemos en la linea misma del JSon es añadir directamente un etiqueta html de tipo <a href> y a su vez, esta con un evento onclick que llame a la función de modificar o eliminar, o lo que queramos que se le haga a ese registro: Por ejemplo:
$accion = '<a href=\"#\" onclick=\"entrar('.$row['id'].')\"><img border=\"0px\" src=\"./imgs/iconoLlave_24x24.png\" alt=\"Entrar\"/></a>';
Y luego, tan solo hay que añadir esta variable $accion al JSon:
No tiene más, espero que entre el vídeo y el código podáis entenderlo, sino, podéis preguntar lo que necesitéis en los comentarios. Por supuesto... si os gusta compartid! Seguimos en contacto!$tabla.='{"idImagen":"'.$row['idImagen'].'","idUsuario":"'.$row['idUsuario'].'","nombre":"'.$row['nombre'].'","extension":"'.$row['extension'].'","escala":"'.$row['escala'].'","tipo":"'.$row['tipo'].',"acciones":"'.$accion.'"},';
Hola. Me parece muy interesante. No entiendo pq no puedo generar el onclick dentro del . además de que tampoco sé donde desarrollaría la funcion del onclick, porque lo intento acontinuacion de pintar la tabla y me da error. Podrías enviarme a mi correo este codigo si no te importa. Gracias
Si has ido siguiendo todos los capítulos supongo que tendrías las dudas resueltas.
El código tendría que preparártelo ya que no lo tengo aislado de algún proyecto.
Con respecto a las dudas, la función llamada desde el evento onclick tendrás que meterlo dentro de un
Creo que esta parte podría explicarla en otro videotutorial por que ya sois varios los que me habéis preguntado.
Me lo apunto para grabarlo 😉
Un saludo y gracias por comentar.
Donde pongo el evento onclick dentro de cual, ya hiciste un video?
Tienes todo el código en github:
https://github.com/DKreativoSL?tab=repositories
Necesito implementar una tabla con datatables que esté conectada con una base de datos y que tenga el botón de eliminar y actualizar los datos, si me podrías facilitar el código por separado de este proyecto me harías un grandisimo favor, quedo al pendiente de alguna respuesta, gracias.
Buenas Santiago, tienes los códigos repartidos, puedes verlo según el tutorial, lo único que tendrías que buscar es el código que lance el eliminar o modificar, pero creo que ya está explicado también en otros tutoriales!
De todas maneras, te diría que te descargaras todo el código y probaras. 😉
Buenas Carlos Dk, te Felicito por tu aporte para todos aquellos que estamos comenzando con este mundo de la programación, espero que sigas mejorando para que todos podamos aprender (LA UNIÓN HACE LA FUERZA).
El único problema que tuve fue con el onclik que no me funcionaba, les dejo como lo pude solucionar para que les sirva a los demás:
ES MUY FACIL:
En la parte que colocas de ejemplo asi:
onclick=\»entrar(‘.$row[‘id’].’)\»
La modifique asi:
onclick=\»entrar(\».$row[‘id’].’\’)\»
y si son dos parametros que desean enviar solo agregan una coma y nuevamente colocan el mismo codigo asi:
onclick=\»entrar(\».$row[‘id’].’\’,\».$row[‘id’].’\’)\»
Gracias Marian por el aporte. El problema de escapar las comillas es algo que a más de uno nos traerá de cabeza en algún tiempo! 😀
Hola Carlos Dk , como puedo colocar el id de cada fila para poder eliminar la fila, cuando presione el boton de eliminar? ayuda porfa
Lo que se muestra en el ejemplo es añadir un botón con ese ID, no a la fila como tal, de esta manera al pulsar el botón se lanzará la función con el id que se ha pasado a la hora de crear el botón 😉
tienes el proyecto del datatable para poder descargarlo me ayudaria mucho por favor
tienes el proyecto del datatable para poder descargarlo me ayudaria mucho por favor mi correo yoandreslacruz@hotmail.com
Quizás es mucho código, pero en el proyecto Dk Web tenemos todo el código expuesto aquí:
https://github.com/DKreativoSL/DKWeb
😉
muchas gracias, sabes que lo que quiero hacer es eliminar, editar y agregar registros, pero no tengo botones en cada fila sino tres botones fuera del datatabe, como podria seleccionar un fila y luego si poder editar o eliminar?
gracias de antemano , sino me explique bien me dices y trato de explicar mejor mi idea
En mi caso, lo que hago es añadir dentro de la propia datatable los botones, no son más que enlaces con la función que corresponda con el ID del registro, así al llamar a la función con el ID ya sabe lo que tiene que hacer. Si lo que quieres es poder seleccionar varios registros, se me ocurre poner un check con una clase por ejemplo «accion» y luego recorrerla, algo como $(‘.accion’).each()
Así podrás ver todos los registros activos y aplicarle la función que quieras.
Espero que te ayude!
Un saludo!
tienes el codigo de este ejemplo para descargarlo?
no se donde colocar la etiqyeta en el json y no se como va la funcion que llama ese enlace
amigo disculpa pero no se como van las funciones js para que el boton de eliminar pueda funcionar por favor pasame el archivo js y el php para poder estudiarlo y editarlo te lo agradesco mucho das buenos aportes
buenas tardes, sabes que lo unico que me hace falta es la parte de javascript 🙁 no se como va eso me lo podrias decir por favor ??
¿Qué parte del javascript necesitas? ¿La llamada para eliminar y modificar?
podrias compartir el proyecto completo?
Buf… Siento decirte que a estas alturas no tengo el código 🙁