Veo que hay mucha gente que ha tenido problemas con este increible plugin de JQuery además de su mal uso, dejaré una guia de como utilizar un data table a partir de una base de datos junto con algunos API y extras:
Data table es un Plugin de JQuery que puede ser utilizado en cualquier lenguaje de programación del lado del servidor (PHP,JPS,ASP, etc), además con cualquier base de datos (MySQL, SQLServer, PostgreSQL, Oracle, etc). Simplemente cambia la manera en que llamas al objeto o la sintaxis del lenguaje de programación. Es totalmente editable a nivel de CSS y también trabaja con JQueryUI con el cual puedes diseñar a tu gusto en su respectiva pagina y simplemente utilizarlo.
Este data table trabaja con arreglos Json asi que aqui mostraré como devolver dicho arreglo.
Con POO vamos a necesitar 3 archivos y una base de datos: en este caso usaremos PHP y MySQL:
1) Pagina .html o también PHP: aquí solo ponemos la tabla en html con sus respectivos TH (cantidad de columnas que tendrá la tabla) y también el llamado al datatable por medio de JQuery y sus respectivas librerías de CSS y Js.
Código HTML:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../DataTables-1.9.2/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.min"></script>
<script type="text/javascript" src="../DataTables-1.9.2/media/js/TableTools.min.js"></script>
<link type="text/css" rel="stylesheet" href="../DataTables-1.9.2/TableTools-2.1.2/media/css/TableTools.css"/>
<link type="text/css" rel="stylesheet" href="../DataTables-1.9.2/media/css/jquery.dataTables_themeroller.css"/>
<link type="text/css" href="../css/redmond/jquery-ui-1.8.20.custom.css" rel="Stylesheet"/>
<script type="text/javascript">
$(document).ready(function() {
$('#tabla').dataTable( {
"bProcessing": true,
"aaSorting": [],
"bJQueryUI": true,
"sDom": '<"H"Tfr>t<"F"ip>', /* Acomoda los elementos en el header y footer de la tabla */
"oTableTools": { /* Para importar a PDF xsl imprimir, etc */
"sSwfPath" : "../DataTables-1.9.2/TableTools-2.1.2/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy",
"print",
"xls",
"pdf",
]
},
"sAjaxSource": 'ejemplo.php', /* archivo que alimentará el data table desde la BD */
"oLanguage": {"sUrl": "../DataTables-1.9.2/es.txt"}, /*lenguajes personalizado*/
"sPaginationType": "full_numbers",
"bAutoWidth": false
} );
} );
</script>
-----------------------------------------------------------------------------
<body>
<table id="tabla" width="100%">
<thead>
<tr>
<th >Cédula</th>
<th >Nombre</th>
<th >Sexo</th>
</thead>
<tbody>
</tbody>
</table>
</body>
2) Archivo PHP del ajaxsource: este archivo es el que alimenta a la tabla con el query de la BD yo lo haré con POO, el que no use esto puede conectar a la BD de la forma que quiera.: ejemplo.php
Código PHP:
<?php
/* se incluye la clase */
require ("../classes/DAOEjemplo.php");
/* se crea el objeto */
try {
$ejemplo = new DAOEjemplo();
$listado = $ejemplo->listarUsuariosJson();
echo $listado;
}
catch (Exception $e) {
header ("Location: errorSistema.php");
}
?>
3 archivo dao o fuente del POO: aqui simplemente esta el query y retorna los arreglos solicitados:
Código PHP:
<?php
function listarUsuariosJson () {
$sql = "SELECT cedula,nombre,sexo from usuarios";
$res = $this->conexion->ejecutar($sql); //objeto de conexion SQL
if( mysql_num_rows($res) >0)
{
while ($row = mysql_fetch_array($res)) {
$output['aaData'][] = $row;
}
return json_encode($output);
}
else {
$output['aaData']['id_pac'] = null;
return json_encode($output);
}
}
?>
y listo con eso su data table deberia funcionar ahora dejaré algunas explicaciones
"bJQueryUI": true, /* Utiliza JQueryUI como tema */
"bServerSide": true, /* Para manejar data tables con mas de 1.000 registros */
"oTableTools" /* Marco de opciones para importar el data table */
"oLanguage": para cambiarle el idioma al data table
Este plugin contiene muchisimas mas opciones para explotar, todavía estoy en proceso de descubrir su mayoria, a medida que vaya encontrando mas funcionalidades la iré agregando al temar
agradecer no cuesta nada :)
