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, [codesyntax lang=”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.']}';

?>

[/codesyntax]

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:

[codesyntax lang=”php”]

$accion = '<a href=\"#\" onclick=\"entrar('.$row['id'].')\"><img border=\"0px\" src=\"./imgs/iconoLlave_24x24.png\" alt=\"Entrar\"/></a>';

[/codesyntax]

Y luego, tan solo hay que añadir esta variable $accion al JSon:

[codesyntax lang="php"]

$tabla.='{"idImagen":"'.$row['idImagen'].'","idUsuario":"'.$row['idUsuario'].'","nombre":"'.$row['nombre'].'","extension":"'.$row['extension'].'","escala":"'.$row['escala'].'","tipo":"'.$row['tipo'].',"acciones":"'.$accion.'"},';

[/codesyntax]

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!