JavaScript

Datatables usando Tabledit con PHP Ajax [Completo]

Datatables usando Tabledit con PHP Ajax. Si tu sistema web está basado con CRUD usando datatable este es tu artículo. Sin embargo, en este articulo veremos la forma de editar rápidamente estas tablas usando un plugin con Ajax que nos simplificara la vida.

Este tutorial, le describiremos paso a paso cómo podemos utilizar el plugin jQuery Tabledit con el plugin Datatable y convertir la cuadrícula de Datable en cuadrícula PHP editable usando Ajax y serverSide que acelera la visibilidad de registros.

Descargar Datatables usando Tabledit con PHP Ajax
Descargar Datatables usando Tabledit con PHP Ajax

¿Cómo funciona el script: Datatables usando Tabledit?

En este post vamos a crear un CRUD Editable usando Datatable con jQuery y Tabledit plugin con PHP y Ajax. Además, este script puede realizar editar o actualizar la operación de datos y eliminar registro mediante el uso de jQuery Tabledit plugin.

Tiene dos opciones editar y eliminar, no necesita ventana modal porque en la misma tabla comenzara la edición del registro seleccionado.

Por otro lado, como se usará Ajax la página no se actualizará porque será procesada mediante solicitud Ajax a script PHP.

¿Que recursos necesita para funcionar?

Necesita los siguientes recursos:

  • Hemos utilizado un plugin jQuery más con el plugin Datatable
  • El plugin jQuery Tabledit con el plugin jQuery Datatable para la edición y eliminación en línea.
  • Lenguaje PHP para interactuar con la base de datos
  • Para procesar usaremos Ajax.
  • Biblioteca Bootstrap

Mediante el uso de Tabledit plugin, convertirá la tabla HTML simple en tabla editable en línea con características como la edición en vivo y la eliminación de datos.

Si desea crear una tabla editable en vivo, puede utilizar este plugin jQuery Tabledit que enviará la solicitud Ajax al script PHP para editar o eliminar datos de la base de datos.

Datatables usando Tabledit: Estructura

A continuación, mostraremos el código fuente completo de los ficheros de este tutorial.

A) Base de datos

Para este ejemplo usaremos una base de datos llamado «db_empleados» y una tabla llamado «personal«. Sin embargo, pueden cambiar de nombre a su gusto.

CREATE TABLE `personal` (
`idp` int(11) NOT NULL COMMENT 'primary key',
`personal_nombre` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'personal nombre',
`personal_edad` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'personal edad',
`personal_salario` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT 'personal salario',
`fecha` date NOT NULL DEFAULT '2020-12-14'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='tabla personal';

INSERT INTO `personal` (`idp`, `personal_nombre`, `personal_edad`, `personal_salario`, `fecha`) VALUES
(1, 'Tiger Nixon', '61', '320800', '2020-12-14'),
(2, 'Garrett Winters', '63', '170750', '2020-12-14'),
(3, 'Ashton Cox', '66', '86000', '2020-12-14'),
(4, 'Cedric Kelly', '22', '433060', '2020-12-14'),
(6, 'Brielle Williamson', '61', '372000', '2020-12-14'),
(7, 'Herrod Chandler', '59', '137500', '2020-12-14'),
(8, 'Rhona Davidson', '55', '327900', '2020-12-14'),
(9, 'Colleen Hurst', '39', '205500', '2020-12-14'),
(10, 'Sonya Frost', '23', '103600', '2020-12-14'),
(11, 'Jena Gaines', '30', '90560', '2020-12-14'),
(12, 'Quinn Flynn', '22', '342000', '2020-12-14'),
(13, 'Charde Marshall', '36', '470600', '2020-12-14'),
(14, 'Haley Kennedy', '43', '313500', '2020-12-14'),
(15, 'Tatyana Fitzpatrick', '19', '385750', '2020-12-14'),
(16, 'Michael Silva', '66', '198500', '2020-12-14'),
(17, 'Paul Byrd', '64', '725000', '2020-12-14'),
(18, 'Gloria Little', '59', '237500', '2020-12-14'),
(19, 'Bradley Greer', '41', '132000', '2020-12-14'),
(20, 'Dai Rios', '35', '217500', '2020-12-14'),
(21, 'Jenette Caldwell', '30', '345000', '2020-12-14'),
(22, 'Yuri Berry', '40', '675000', '2020-12-14'),
(23, 'Caesar Vance', '21', '106450', '2020-12-14'),
(24, 'Doris Wilder', '23', '85600', '2020-12-14'),
(25, 'Angelica Ramos', '47', '1200000', '2020-12-14'),
(26, 'Gavin Joyce', '42', '92575', '2020-12-14'),
(27, 'Jennifer Chang', '28', '357650', '2020-12-14'),
(28, 'Brenden Wagner', '28', '206850', '2020-12-14'),
(29, 'Fiona Green', '48', '850000', '2020-12-14'),
(30, 'Shou Itou', '20', '163000', '2020-12-14'),
(31, 'Michelle House', '37', '95400', '2020-12-14'),
(32, 'Suki Burks', '53', '114500', '2020-12-14'),
(33, 'Prescott Bartlett', '27', '145000', '2020-12-14'),
(34, 'Gavin Cortez', '22', '235500', '2020-12-14'),
(35, 'Martena Mccray', '46', '324050', '2020-12-14'),
(36, 'Unity Butler', '47', '85675', '2020-12-14'),
(37, 'Howard Hatfield', '51', '164500', '2020-12-14'),
(38, 'Hope Fuentes', '41', '109850', '2020-12-14'),
(39, 'Vivian Harrell', '62', '452500', '2020-12-14'),
(40, 'Timothy Mooney', '37', '136200', '2020-12-14'),
(41, 'Jackson Bradshaw', '65', '645750', '2020-12-14'),
(42, 'Olivia Liang', '64', '234500', '2020-12-14'),
(43, 'Bruno Nash', '38', '163500', '2020-12-14'),
(44, 'Sakura Yamamoto', '37', '139575', '2020-12-14'),
(45, 'Thor Walton', '61', '98540', '2020-12-14'),
(46, 'Finn Camacho', '47', '87500', '2020-12-14'),
(47, 'Serge Baldwin', '64', '138575', '2020-12-14'),
(48, 'Zenaida Frank', '63', '125250', '2020-12-14'),
(49, 'Zorita Serrano', '56', '115000', '2020-12-14'),
(50, 'Jennifer Acosta', '43', '75650', '2020-12-14'),
(51, 'Cara Stevens', '46', '145600', '2020-12-14'),
(52, 'Hermione Butler', '47', '356250', '2020-12-14'),
(53, 'Lael Greer', '21', '103500', '2020-12-14'),
(54, 'Jonas Alexander', '30', '86500', '2020-12-14'),
(55, 'Shad Decker', '51', '183000', '2020-12-14'),
(56, 'Michael Bruce', '29', '183000', '2020-12-14'),
(57, 'Maicol', '28', '100000', '2020-12-14');

ALTER TABLE `personal`
ADD PRIMARY KEY (`idp`);

ALTER TABLE `personal`
MODIFY `idp` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=64;

B) Fichero index.php

Es un archivo principal que será en encargado de llamar a las librerías tanto del DataTables, BootStrap y tabledit. Por lo tanto, mostrara la tabla principal con la información de la base de datos.

Aquí, el código fuente completo.

<html>
<head>
<title>Tabledit usando Datatable con PHP Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="container">
<h3 align="left">Tabledit usando Datatable con PHP Ajax</h3>
<br />
<div class="panel panel-primary">
<div class="panel-heading">Sample Data</div>
<div class="panel-body">
<div class="table-responsive">
<table id="personal" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nombre personal</th>
<th>Edad</th>
<th>Salario</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script type="text/javascript" language="javascript" src="script.js"></script>

C) La conexión con MySQL

Posee pocas líneas de código, pero es fundamental para el funcionamiento del script porque su rol será de realizar la conexión con MySQL e interactuar con la tabla.

<?php
//dbconect.php
$connect = new PDO("mysql:host=localhost; dbname=db_empleados", "root", "");
?>

D) Fichero datos.php

Este archivo cumple el rol de procesar la información, por ejemplo, realizar la consulta SQL, búsqueda en la tabla y mediante el ciclo FOREACH muestra el contenido de la tabla MySQL.

<?php

//datos.php

include('dbconect.php');

$column = array("idp", "personal_nombre", "personal_edad", "personal_salario");

$query = "SELECT * FROM personal ";

if(isset($_POST["search"]["value"]))
{
$query .= '
WHERE personal_nombre LIKE "%'.$_POST["search"]["value"].'%" 
OR personal_edad LIKE "%'.$_POST["search"]["value"].'%" 
OR personal_salario LIKE "%'.$_POST["search"]["value"].'%" 
';
}

if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY idp asc ';
}
$query1 = '';

if($_POST["length"] != -1)
{
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row['idp'];
$sub_array[] = $row['personal_nombre'];
$sub_array[] = $row['personal_edad'];
$sub_array[] = $row['personal_salario'];
$data[] = $sub_array;
}

function count_all_data($connect)
{
$query = "SELECT * FROM personal";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}

$output = array(
'draw' => intval($_POST['draw']),
'recordsTotal' => count_all_data($connect),
'recordsFiltered' => $number_filter_row,
'data' => $data
);

echo json_encode($output);

?>

E) Archivo edicion.php

Su nombre lo dice todo, será el encargado de realizar la edición e eliminación de registros mostrados en la tabla HTML

<?php

//edicion.php

include('dbconect.php');

if($_POST['action'] == 'edit')
{
$data = array(
':personal_nombre' => $_POST['personal_nombre'],
':personal_edad' => $_POST['personal_edad'],
':personal_salario' => $_POST['personal_salario'],
':idp' => $_POST['idp']
);

$query = "
UPDATE personal 
SET personal_nombre = :personal_nombre, 
personal_edad = :personal_edad, 
personal_salario = :personal_salario 
WHERE idp = :idp
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo json_encode($_POST);
}

if($_POST['action'] == 'delete')
{
$query = "
DELETE FROM personal 
WHERE idp = '".$_POST["idp"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
echo json_encode($_POST);
}

?>

F) Archivo script.php

Líneas de código correspondiente al datatables. Por lo tanto, su función es mostrar la información y además de la configuración del plugin.

$(document).ready(function(){

var dataTable = $('#personal').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"datos.php",
type:"POST"
}
});

$('#personal').on('draw.dt', function(){
$('#personal').Tabledit({
url:'edicion.php',
dataType:'json',
columns:{
identifier : [0, 'idp'],
editable:[[1, 'personal_nombre'], [2, 'personal_edad'], [3, 'personal_salario']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.idp).remove();
$('#personal').DataTable().ajax.reload();
}
}
});
});

});

CONCLUSIÓN

Este post le ayudará a hacer que la tabla de datos sea editable mediante el uso de jQuery tabledit plugin con script PHP y Ajax.

En este tutorial, hemos utilizado el complemento tabledit con jQuery Datatable para convertir la cuadrícula de Datatable en línea editable Datatable con editar o eliminar datos de Datatable sin actualización de la página web

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

9 comentarios

  1. No funciona. Da problemas con el Json, inclusive descargando todo el proyecto y sin modificar absolutamente nada. Se muestra el formato inicial de las columnas al abrir, pero de inmediato da problemas con el Json.

    1. Me ha pasado lo mismo, pero en mi caso tenía que ver con el charset. Buscando por internet encontré esta solución y me ha funcionado. En el archivo dbconnect.php añadir esta línea:

      $connect->exec(«set names utf8»);

      El archivo dbconnect.php debería quedar así:

      exec(«set names utf8»);
      ?>

      Suerte.

    2. El código completo de la anterior respuesta no quedó bién. Añadir la linea de código después de «…dbname=db_empleados’, ‘root’, »);»

      Tendría que ser así (sin /* i */ del principio y del final):

      /*exec(«set names utf8»);
      ?>*/

      Espero que quede bien.

  2. Hola. Muchas gracias por aportar tanto a nuestro aprendizaje con sus valiosos tutoriales.
    En el tutorial: Datatables usando Tabledit con PHP Ajax [Completo] ¿Podría ayudarnos a saber cómo agregar la funcionalidad de Insertar registros agregando registros abajo de la tabla (sin presentar una pantalla modal)?

    De antemano, sinceramente, ¡muchísimas gracias!

  3. excelente este plugin, lo que quiero es que la busqueda que se hace en datos.php lleve un valor variable para que el select pueda hacer un where, que deberia hacer?, muchas gracias desde ya

  4. Hola, buenisimo este plugin… solo que como siempre tiene problema de idioma, el boton «save» que deberia decir «guardar», y el boton

Deja una respuesta

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

Botón volver arriba