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.

jquery

Añadir botonera a Datatables 

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:

$tabla.='{"idImagen":"'.$row['idImagen'].'","idUsuario":"'.$row['idUsuario'].'","nombre":"'.$row['nombre'].'","extension":"'.$row['extension'].'","escala":"'.$row['escala'].'","tipo":"'.$row['tipo'].',"acciones":"'.$accion.'"},';
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!

Te puede interesar:

19 comentarios

  • Aaron commented on 9 junio, 2015 Reply

    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

  • videotutoriales commented on 9 junio, 2015 Reply

    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.

  • Brayan commented on 15 noviembre, 2015 Reply

    Donde pongo el evento onclick dentro de cual, ya hiciste un video?

  • Santiago commented on 13 abril, 2016 Reply

    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.

    • Carlos Dk commented on 14 abril, 2016 Reply

      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. 😉

  • Marian commented on 23 junio, 2016 Reply

    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’].’\’)\”

    • Carlos Dk commented on 23 junio, 2016 Reply

      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! 😀

  • Marian commented on 23 junio, 2016 Reply

    Hola Carlos Dk , como puedo colocar el id de cada fila para poder eliminar la fila, cuando presione el boton de eliminar? ayuda porfa

    • Carlos Dk commented on 29 junio, 2016 Reply

      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 😉

  • jesus commented on 13 julio, 2016 Reply

    tienes el proyecto del datatable para poder descargarlo me ayudaria mucho por favor

  • jesus commented on 13 julio, 2016 Reply

    tienes el proyecto del datatable para poder descargarlo me ayudaria mucho por favor mi correo yoandreslacruz@hotmail.com

    • Carlos Dk commented on 16 julio, 2016 Reply

      Quizás es mucho código, pero en el proyecto Dk Web tenemos todo el código expuesto aquí:
      https://github.com/DKreativoSL/DKWeb
      😉

      • jesus commented on 20 julio, 2016 Reply

        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

        • Carlos Dk commented on 20 julio, 2016 Reply

          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!

  • jesus commented on 21 julio, 2016 Reply

    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

  • yoandres commented on 22 julio, 2016 Reply

    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 ??

    • Carlos Dk commented on 10 agosto, 2016 Reply

      ¿Qué parte del javascript necesitas? ¿La llamada para eliminar y modificar?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *