Crear tablas editables con jQuery, PHP y MySQL

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));
}
}
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP