Primero descargamos los plugins necesarios para el trabajo:
JQuery
JQuery Form
Ahora creamos el siguiente documento html:
<!DOCTYPE html>
<html>
<head>
<title>Tabla dinamica con Ajax</title>
</head>
<body>
<form name="form" id="form" method="post" action="otroarchivo.php">
<input type="hidden" name="accion">
<label>Nombres:</label>
<input type="text" name="nombre">
<label>Apellidos:</label>
<input type="text" name="apellidos">
<input type="submit" onclick="document.form.accion.value='anadir';">
</form>
<div id="salida">
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</table>
</div>
</body>
</html>
Lo guardamos con el nombre de index.php dentro de una carpeta llamada tabladinamicaajax en nuestro servidor. El archivo anterior consiste de un formulario con dos campos de texto, el cual tiene como destino o action otro archivo llamado otroarchivo.php que crearemos posteriormente. El formulario tiene como id form el cual utilizaremos después. Luego tenemos un div con id salida este nos servirá más adelante para contener a nuestra tabla dinámica. También dentro del formulario hay un botón de tipo submit con un evento onclick el cual sirve para asignarle un valor a un control tipo hidden que nos servirá como bandera para la inserción de registros a la tabla.
Ahora añadiremos a nuestro archivo los enlaces a los plugins que acabamos de descargar. Para ello se deben guardar ambos archivos en la misma carpeta que el archivo anterior y luego añadimos dentro del head lo siguiente:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
Lo siguiente es añadir el siguiente script justo debajo de los archivos:
<script type="text/javascript">
$(document).ready(function(){
$('#form').submit(function(){
$(this).ajaxSubmit({
target: '#salida'
});
return false;
});
})
</script> Donde #form corresponde al id del formulario que insertamos anteriormente y #salida corresponde al id del div que contiene la tabla.
Con esto estamos evitando que se produzca el efecto de refresh en el formulario.
Ahora vamos a añadir los registros a la tabla. Añadimos al principio del código lo siguiente:
<?
session_start();
if($_POST['accion']==""){
$_SESSION['contador']=0;
}
?>
Y con esto terminamos de editar el archivo del formulario. Ahora crearemos el archivo otroarchivo.php en la misma carpeta con el siguiente código:
<?
session_start();
if($_POST['accion']=="anadir"){
$_SESSION['datos'][$_SESSION['contador']]['nombre']=$_POST['nombre'];
$_SESSION['datos'][$_SESSION['contador']]['apellidos']=$_POST['apellidos'];
$_SESSION['contador']++;
echo "<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>";
for ($i=0; $i < $_SESSION['contador'] ; $i++) {
echo "<tr>
<td>".$_SESSION['datos'][$i]['nombre']."</td>
<td>".$_SESSION['datos'][$i]['apellidos']."</td>
</tr>";
}
echo "</table>";
}
?>
Después de esto se comprueba el valor de accion el cual de ser igual a anadir, significaría que se ha dado clic en el botón enviar, esto gracias al evento onclick colocado en el mismo. Luego se guardan los datos en la matriz y posteriormente se redibuja la tabla con los datos de la matriz
- Para manipular los datos de la tabla se utilizará la matriz $_SESSION['datos'] de esa manera podemos almacenar en la base de datos o lo que se requiera.
- Como la página no se refresca, los datos del formulario no se borran, esto fue completamente a propósito para que se observará el funcionamiento de ajax, pero cada uno deberá añadir al ejemplo el código para limpiar los campos que considere pertinentes
- Cualquier sugerencia o duda pueden comentar o añadirme al google+. Estoy para ayudar.
Excelente POST!!!!!!!!!!!!!!!!
ResponderEliminarme as ayudado mucho!!!
un +1 por el aporte xD
Buenos días tendrán un ejemplo de cuando uno agregue datos a una tabla de forma dinámica pero sin recargar la pagina para después de que cuando termine todo lo que el usuario quiere se pueda guardar
ResponderEliminar