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!

Carlos Dk

Apasionado por la enseñanza y el SEO

21 comentarios en “Añadir botones a una datatable de modificar y eliminar un registro

  • el 9 junio, 2015 a las 9:56 am
    Permalink

    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

    Respuesta
  • el 9 junio, 2015 a las 10:01 am
    Permalink

    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.

    Respuesta
  • el 15 noviembre, 2015 a las 10:50 pm
    Permalink

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

    Respuesta
  • el 13 abril, 2016 a las 4:53 am
    Permalink

    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.

    Respuesta
    • el 14 abril, 2016 a las 7:39 am
      Permalink

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

      Respuesta
  • el 23 junio, 2016 a las 12:47 pm
    Permalink

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

    Respuesta
    • el 23 junio, 2016 a las 3:37 pm
      Permalink

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

      Respuesta
  • el 23 junio, 2016 a las 6:13 pm
    Permalink

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

    Respuesta
    • el 29 junio, 2016 a las 11:06 pm
      Permalink

      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 😉

      Respuesta
  • el 13 julio, 2016 a las 8:37 am
    Permalink

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

    Respuesta
      • el 20 julio, 2016 a las 1:54 am
        Permalink

        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

        Respuesta
        • el 20 julio, 2016 a las 7:19 am
          Permalink

          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!

          Respuesta
  • el 21 julio, 2016 a las 8:50 pm
    Permalink

    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

    Respuesta
  • el 22 julio, 2016 a las 8:33 pm
    Permalink

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

    Respuesta
    • el 10 agosto, 2016 a las 8:07 am
      Permalink

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

      Respuesta
  • el 18 octubre, 2021 a las 9:14 pm
    Permalink

    podrias compartir el proyecto completo?

    Respuesta
    • el 28 octubre, 2021 a las 8:18 am
      Permalink

      Buf… Siento decirte que a estas alturas no tengo el código 🙁

      Respuesta

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.