jQuery Datatables es un plugin para jQuery que permite añadir funcionalidades avanzadas a cualquier tabla HTML como filtrado, ordenacion y edicion
Hoy vamos a ver como se hace una tabla basica y como se puede editar su contenido añadiendo el plugin Editor
Lo primero sera descargar Datatables y Editor y crear nuestra plantilla
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Datatables</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="css/dataTables.editor.css" />
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables.tableTools.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables.editor.js"></script>
</head>
<body></body>
</html>
Lo siguiente sera crear una tabla. Tenemos 3 opciones, o creamos la tabla con los valores directamente, cogemos los valores del servidor mediante AJAX o definimos una variable que le pasaremos a nuestra tabla. En nuestro caso vamos a optar por la segunda opcion, cogeremos los valores desde el servidor mediante AJAX
Para continuar con el ejemplo tendreis que tener instalado un servidor Apache HTTP o similar para poder servir paginas en PHP
Nuestro archivo data.php solo va a devolver un array en JSON que seran nuestros datos
<?php
$data = array(
"data"=>array(
array(
"name"=>"Peter",
"lastname"=>"Griffin",
"city"=>"Quahog",
"gender"=>"male"
),
array(
"name"=>"Homer",
"lastname"=>"Simpson",
"city"=>"Springfield",
"gender"=>"male"
),
array(
"name"=>"Turanga",
"lastname"=>"Leela",
"city"=>"New New York",
"gender"=>"female"
)
)
);
header('Content-type: application/json');
echo json_encode($data);
Añadimos la siguiente tabla a nuestro codigo HTML
<table id="mytable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Last name</th>
<th>City</th>
<th>Gender</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Last name</th>
<th>City</th>
<th>Gender</th>
</tr>
</tfoot>
</table>
Y el siguiente codigo Javascript
$(document).ready(function () {
var datatable = $("#mytable").DataTable({
ajax: "data.php",
columns: [{ data: "name" }, { data: "lastname" }, { data: "city" }, { data: "gender" }],
});
});
Con solo esto ya tendriamos la tabla creada con datos y con las funcionalidades basicas de busqueda y ordenacion
Para añadir la funcionalidad de edicion debemos cambiar el codigo que inicia la tabla para que tenga cree 2 links, el de edicion y el de borrado ademas de añadir una nueva columna a nuestra tabla HTML con lo que nuestro codigo quedaria de la siguiente manera
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Datatables</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="css/dataTables.editor.css" />
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables.editor.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var datatable = $("#mytable").DataTable({
ajax: "data.php",
columns: [
{ data: "name" },
{ data: "lastname" },
{ data: "city" },
{ data: "gender" },
{
data: null,
defaultContent:
'<a href="#" class="edit">Edit</a> / <a href="#" class="remove">Delete</a>',
},
],
});
});
</script>
</head>
<body>
<table id="mytable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Last name</th>
<th>City</th>
<th>Gender</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Last name</th>
<th>City</th>
<th>Gender</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</body>
</html>
Definimos el editor
editor = new $.fn.dataTable.Editor({
ajax: "actions.php",
table: "#mytable",
fields: [
{ label: "Name", name: "name" },
{ label: "Last name", name: "lastname" },
{ label: "City", name: "city" },
{ label: "Gender", name: "gender" },
],
});
Y definimos las acciones que tenemos por el momento
$("#mytable").on("click", "a.edit", function (e) {
e.preventDefault();
editor
.title("Edit record")
.buttons({
label: "Update",
fn: function () {
editor.submit();
},
})
.edit($(this).closest("tr"));
});
$("#mytable").on("click", "a.remove", function (e) {
e.preventDefault();
editor
.message("Are you sure you wish to remove this record?")
.buttons({
label: "Delete",
fn: function () {
editor.submit();
},
})
.remove($(this).closest("tr"));
});
Cuando pulsemos en Edit o Delete hara una llamada a actions.php que definiremos de la siguiente manera
<?php
$action = $_POST['action'];
if ($action == 'remove')
{
$id= $_POST['id'][0];
//Remove code
echo '{}';
}
elseif ($action == 'edit')
{
$id= $_POST['id'];
$data = $_POST['data'];
//Edit code
echo '{}';
}
Cuando estamos borrando en la variable id es un array que contiene un id. En la accion de grabar la variable data es la que contiene todos los datos que estamos editando. Para que este id venga, debemos añadir un id a nuestros datos de la siguiente manera
<?php
$data = array(
"data"=>array(
array(
"id"=>1,
"name"=>"Peter",
"lastname"=>"Griffin",
"city"=>"Quahog",
"gender"=>"male"
),
array(
"id"=>2,
"name"=>"Homer",
"lastname"=>"Simpson",
"city"=>"Springfield",
"gender"=>"male"
),
array(
"id"=>3,
"name"=>"Turanga",
"lastname"=>"Leela",
"city"=>"New New York",
"gender"=>"female"
)
)
);
header('Content-type: application/json');
echo json_encode($data);
editor = new $.fn.dataTable.Editor({
ajax: "actions.php",
table: "#mytable",
idSrc: "id",
fields: [
{ label: "Name", name: "name" },
{ label: "Last name", name: "lastname" },
{ label: "City", name: "city" },
{ label: "Gender", name: "gender" },
],
});
Lo unico que nos falta es un link para poder dar de alta nuevas opciones en la lista. Crearemos un link html
<a href="#" class="create">New</a>
Y le añadiremos el codigo necesario para controlar su funcionamiento
$("a.create").on("click", function (e) {
e.preventDefault();
editor
.title("Create new record")
.buttons({
label: "Add",
fn: function () {
editor.submit();
},
})
.create();
});
Modificamos el codigo del archivo actions para que tenga en cuenta la nueva funcionalidad
<?php
$action = $_POST['action'];
if ($action == 'remove')
{
$id= $_POST['id'][0];
//Remove code
echo '{}';
}
elseif ($action == 'edit')
{
$id= $_POST['id'];
$data = $_POST['data'];
//Edit code
echo '{}';
}
elseif ($action == 'create')
{
$data = $_POST['data'];
//Create code
echo '{}';
}
Y con esto ya tenemos todo listo. Happy Coding!