Seguramente has visto sitios webs en los que es posible editar la información de una tabla directamente sobre la misma tabla, haciendo clic sobre las celdas. Esta, es una característica muy usable que mejora muy mucho la experiencia del usuario. En este tutorial te mostraremos cómo implementar tablas HTML editables con jQuery y PHP. Para ello utilizaremos el plugin de jQuery tabledit que mediante AJAX permite la edición de las celdas de una tabla HTML.
La estructura de archivos que seguiremos en este ejemplo, será la siguiente:
- index.php
- custom_table_edit.js
- live_edit.php
Crear tabla en la base de datos MySQL
La información de la tabla que vamos a editar la extraeremos de una tabla de nuestra base de datos MySQL. Para ello crraremos una nueva tabla llamada developers e insertaremos algunos registros en ella para mostrarlos después.
CREATE TABLE `developers` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skills` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `gender` varchar(255) NOT NULL, `designation` varchar(255) NOT NULL, `age` int(11) NOT NULL, `image` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Incluir la librería jQuery y el plugin tabledit
Para gestionar la función de editar la tabla inline necesitaremos el plugin tabledit, un plugin para jQuery. Por lo cual, tendremos que incluir los dos archivos en nuestro documento.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="dist/jquery.tabledit.js"></script> <script type="text/javascript" src="custom_table_edit.js"></script>
Crear tabla HTML con los datos de la tabla
Ahora, en index.php, crearemos la tabla HTML y la rellenaremos con la información que hemos insertado en nuestra tabla developers.
<table id="data_table" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
$sql_query = "SELECT id, name, gender, address, designation, age FROM developers LIMIT 10";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while( $developer = mysqli_fetch_assoc($resultset) ) {
?>
<tr id="<?php echo $developer ['id']; ?>">
<td><?php echo $developer ['id']; ?></td>
<td><?php echo $developer ['name']; ?></td>
<td><?php echo $developer ['gender']; ?></td>
<td><?php echo $developer ['age']; ?></td>
<td><?php echo $developer ['designation']; ?></td>
<td><?php echo $developer ['address']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
Hacer que nuestra tabla HTML sea editable
En el fichero custom_table_edit.js, llamaremos a la función Tabledit() para hacer que las celdas de nuestra tabla sean editables. Para ello necesitaremos configurar el plugin según nuestros menesteres. Entre las opciones de configuración, destacar la importancia de la propiedad url en la que definiremos el archivo que realizará los cambios en nuestra base de datos. En nuestro caso lo apuntaremos al fichero live_edit.php.
$(document).ready(function(){
$('#data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'designation'], [5, 'address']]
},
hideIdentifier: true,
url: 'live_edit.php'
});
});
Guardar los cambios realizados en la tabla MySQL
Por último, en live_edit.php, gestionaremos la funcionalidad de editar los cambios realizados por el usuario en nuestra tabla HTML.
<?php
include_once("db_connect.php");
$input = filter_input_array(INPUT_POST);
if ($input['action'] == 'edit') {
$update_field='';
if(isset($input['name'])) {
$update_field.= "name='".$input['name']."'";
} else if(isset($input['gender'])) {
$update_field.= "gender='".$input['gender']."'";
} else if(isset($input['address'])) {
$update_field.= "address='".$input['address']."'";
} else if(isset($input['age'])) {
$update_field.= "age='".$input['age']."'";
} else if(isset($input['designation'])) {
$update_field.= "designation='".$input['designation']."'";
}
if($update_field && $input['id']) {
$sql_query = "UPDATE developers SET $update_field WHERE id='" . $input['id'] . "'";
mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
}
}
?>