<?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>
