A continuacion un ejemplo de como instalar DataTable con datos traidos desde la base de datos.
1. Descargar la version mas reciente de DataTable en la siguiente direccion: http://datatables.net/download/, extraer el archivo .zip
2. Ejecutar el siguiente script para la creacion de la base de datos:
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `datatable_ejemplo`
--
CREATE DATABASE IF NOT EXISTS `datatable_ejemplo` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `datatable_ejemplo`;
-- --------------------------------------------------------
--
-- Table structure for table `cliente`
--
CREATE TABLE IF NOT EXISTS `cliente` (
`codigo` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(25) NOT NULL,
`apellido` varchar(25) NOT NULL,
`direccion` varchar(45) NOT NULL,
`telefono` varchar(12) NOT NULL,
PRIMARY KEY (`codigo`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `cliente`
--
INSERT INTO `cliente` (`codigo`, `nombre`, `apellido`, `direccion`, `telefono`) VALUES
(1, 'Maria', 'Lopez', 'c/ 20 Los Ramos', '829-234-2344'),
(2, 'Juan', 'Gomez', 'c/ D Las Flores', '849-322-2344'),
(3, 'Flavia', 'Pichardo', 'c/77 El tronco', '809-345-6420');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
3. Abrir un documento php con el formato HTML correspondiente.
4. Hacer la conexion a la base de datos:
<?php
mysql_connect('localhost','root','') or die ("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
5. Crear la tabla html que contendra nuestros datos. Es muy importante que la tabla cuente con las etiquetas <theader> y <tfooter> para que el DataTable pueda funcionar. El siguiente es mi codigo para el ejemplo.
<table id="datatables">
<thead>
<tr>
<th> <strong>Codigo </strong> </th>
<th> <strong>Nombre </strong> </th>
<th> <strong>Apellido </strong> </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();
while ($fila = mysql_fetch_array($re)) {
echo '<tr">
<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>
</tr>';
}
?>
</tbody>
</table>
6. Luego hay que anadir dentro de las etiquetas <head> el enlace a los estilos css para el dataTable de la siguiente manera:
<style type="text/css" title="currentStyle">
@import "DataTables-1.9.4/media/css/jquery.dataTables.css";
</style>
7. Finalmente necesario insertar justo despues del cierre de la etiqueta <body> los siguientes enlaces:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ENLACE A JQUERY ALMACENADO EN LA LIBRERIA DE GOOGLE -->
<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> <!-- ENLACE A LOS SCRIPTS DE JQUERY DE EL DATATABLE -->
<script type="text/javascript" charset="utf-8"> <!-- FUNCION PARA INICIALIZAR EL DATATABLE Y PERSONALIZARLO AL ESPANOL -->
$(document).ready(function() {
$('#datatables').dataTable({
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ ",
"sZeroRecords": "No existen datos para esta consulta",
"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
}
});
})
</script>
El resultado deberia lucir asi:
Este es mi codigo completo:
<?php
mysql_connect('localhost', 'root', '') or die("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
<html>
<title> DataTable Ejemplo </title>
<head>
<style type="text/css" title="currentStyle">
@import "DataTables-1.9.4/media/css/jquery.dataTables.css";
</style>
</head>
<body>
<table id="datatables">
<thead>
<tr>
<th> <strong>Codigo </strong> </th>
<th> <strong>Nombre </strong> </th>
<th> <strong>Apellido </strong> </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();
while ($fila = mysql_fetch_array($re)) {
echo '<tr">
<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>
</tr>';
}
?>
</tbody>
</table>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ENLACE A JQUERY ALMACENADO EN LA LIBRERIA DE GOOGLE -->
<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> <!-- ENLACE A LOS SCRIPTS DE JQUERY DE EL DATATABLE -->
<script type="text/javascript" charset="utf-8"> <!-- FUNCION PARA INICIALIZAR EL DATATABLE Y PERSONALIZARLO AL ESPANOL -->
$(document).ready(function() {
$('#datatables').dataTable({
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ ",
"sZeroRecords": "No existen datos para esta consulta",
"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
}
});
})
</script>
</html>
mysql_connect('localhost', 'root', '') or die("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
<html>
<title> DataTable Ejemplo </title>
<head>
<style type="text/css" title="currentStyle">
@import "DataTables-1.9.4/media/css/jquery.dataTables.css";
</style>
</head>
<body>
<table id="datatables">
<thead>
<tr>
<th> <strong>Codigo </strong> </th>
<th> <strong>Nombre </strong> </th>
<th> <strong>Apellido </strong> </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();
while ($fila = mysql_fetch_array($re)) {
echo '<tr">
<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>
</tr>';
}
?>
</tbody>
</table>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ENLACE A JQUERY ALMACENADO EN LA LIBRERIA DE GOOGLE -->
<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> <!-- ENLACE A LOS SCRIPTS DE JQUERY DE EL DATATABLE -->
<script type="text/javascript" charset="utf-8"> <!-- FUNCION PARA INICIALIZAR EL DATATABLE Y PERSONALIZARLO AL ESPANOL -->
$(document).ready(function() {
$('#datatables').dataTable({
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ ",
"sZeroRecords": "No existen datos para esta consulta",
"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
}
});
})
</script>
</html>
