Hoy veremos un ejemplo básico de DataTables con Server Side que nos hará mostrar grandes cantidades de datos directo desde base de datos de forma eficiente y veloz. Seguramente en más de un proyecto web habrás tenido la necesidad de mostrar datos en una tabla, podremos hacerlo con una tabla normal hecha por nosotros que posiblemente lucirá bastante fea y nos tomará bastante tiempo crearla o mediante DataTables.
Para comenzar dejame decirte que si sigues utilizando tablas sencillas para tus proyectos debes de actualizarte con urgencia.
Existen muchas opciones para crear tablas mucho más presentables y con funcionalidades de otro nivel de forma más rápida.
Hoy hablaremos de una de ellas, DataTables. Así como la forma en que podemos utilizarla para mostrar datos directamente de la base de datos de nuestro proyecto.
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresaAdemás, mediante esta forma que te mostraré (Server Side) el tiempo de carga de la información es de locos! Con esta forma podremos mostrar cantidades de datos impresionantes en realmente poco tiempo que si lo hacemos de forma convencional.
Hace tiempo hablamos sobre que aprender si quieres ser un desarrollador web, pues ahora te digo que si ya eres un desarrollador web y no utilizas DataTables te estas perdiendo de mucho!
¿Estas listo para pasar tus tablas al siguiente nivel? Veamos el siguiente ejemplo de DataTables con Server Side.
¿Qué es DataTables?
DataTables es una librería gratuita basada en JQuery ( y a su vez en Javscript ) para enaltecer las tablas HTML.
Agrega caracteristicas fantasticas como paginación, búsqueda instantanea, ordenamiento por columnas, responsiva para moviles, fácil de traducir a cualquier idioma, muchas extensiones (por si hiciera falta), gran comunidad e información en Internet y muchas cosas más!
Realmente si no estas utilizando DataTables en tus proyectos te estas perdiendo de mucho..
Preparando la librería
Inicialización
Para comenzar necesitamos agregar DatTables a nuestro proyecto.
Te recomiendo ir al sitio web de datatables para más información sobre cómo comenzar o puedes agregar los siguientes archivos via CDN:
Agregamos los archivos CSS / JS básicos:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
Creamos una estructura básica de HTML:
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>Y la inicializamos en JS:
$(document).ready( function () {
$('#table_id').DataTable();
} );Sobra resaltar que necesitamos la librería jQuery para hacer funcionar este ejemplo. Llámala antes de la librería de DataTables.
Nuestro ejemplo
Ahora bien, para nuestro ejemplo yo utilizó varios archivos y extensiones más para maximar nuestra tabla: responsive, uikit, buttons (bastante genial para agregar botones de exportar la información en Excel, CSV y PDF), etc.
En resumen mis CSS lucen así (tengo los archivos en local):
<!-- DataTables -->
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="assets/css/responsive.dataTables.min.css" rel="stylesheet" />
<link href="assets/css/uikit.min.css" rel="stylesheet" />
<link href="assets/css/dataTables.uikit.min.css" rel="stylesheet" />
<link href="assets/css/buttons.dataTables.min.css" rel="stylesheet" />
<!-- DataTables -->Y mis JS lucen así:
<!-- DataTables -->
<script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.uikit.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.flash.min.js" type="text/javascript"></script>
<script src="assets/js/jszip.min.js" type="text/javascript"></script>
<script src="assets/js/pdfmake.min.js" type="text/javascript"></script>
<script src="assets/js/vfs_fonts.js" type="text/javascript"></script>
<script src="assets/js/buttons.html5.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.print.min.js" type="text/javascript"></script>
<!-- DataTables -->Puedes obtener varias de estas extensiones en el sitio web de DataTables (Por ejemplo Buttons o Responsive).
Veamos ahora como luce nuestra tabla HTML de ejemplo.
Estructura de la tabla
Veamos como tenemos nuestra estructura HTML de nuestro ejemplo de DataTables con Server Side:
<table id="tabla_piezas" class="display nowrap tablaPersonalizada" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>NUM DE PARTE</th>
<th>DESCRIPCIÓN</th>
<th>CLIENTE</th>
<th>ARMADORA</th>
<th>PROYECTO</th>
<th>CATEGORIA</th>
<th>INSTRUCTIVO</th>
<th>INSTRUCTIVO 2</th>
<th><i class="fa fa-bars"></i></th>
</tr>
</thead>
</table>Como puedes ver únicamente definimos la estructura pero no establecemos información.
Potenciando nuestra tabla
Ahora si, veamos como potenciaremos nuestra tabla con ayuda de DataTables con Server Side.
En nuestro código Javascript vamos a inicializar nuestra tabla mediante su ID:
tabla = $('#tabla_piezas').DataTable({
"bProcessing": true,
"sAjaxSource": "database/obtenerTablaConsultarPiezas.php",
"aoColumns": [
{ mData: 'idpieza' },
{ mData: 'numdeparte' },
{ mData: 'descripcion' },
{ mData: 'cliente' },
{ mData: 'armadora' },
{ mData: 'proyecto' },
{ mData: 'categoria' },
{ mData: 'instructivo' },
{ mData: 'instructivo2' },
{ mData: 'acciones' }
],
retrieve: true,
dom: 'Blfrtip',
"pageLength": 10,
"order": [[ 1, "asc" ]],
buttons: [
{
extend: 'excelHtml5',
text: 'EXCEL'
},
{
extend: 'csvHtml5',
text: 'CSV'
},
{
extend: 'pdfHtml5',
text: 'PDF'
}
],
"columnDefs": [
{
"visible": false,
"searchable": true,
}
],
"language": {
"sProcessing": "",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"searchPlaceholder": "Escribe aquí para buscar..",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "<img style='display: block;width:100px;margin:0 auto;' src='assets/img/loading.gif' />",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}
});Aquí tenemos información de sobre para explicar, vamos por orden:
Antes que nada nos convertimos en nuestra tabla y la convertimos en DataTable.
bProcessing: Para mostrar un indicador de que nuestra información esta cargando.
sAjaxSource: Obtiene la información desde una fuente Ajax, en este caso un archivo PHP que se conecta a una base de datos.
aoColumns: Nos sirve para conectar nuestras columnas de base de datos a las columnas de nuestra tabla, lo entenderemos mejor cuando veamos nuestro archivo php source.
retrieve: Definimos que obtendremos una instancia de BD.
dom: Esto nos sirve para definir como acomodar los componentes de nuestra Tabla, botones, buscador, etc.
pageLength: La cantidad de registros que serán visibles en la pantalla.
order: Como se ordenará la información, por cual columna y si será en ascendente o descendente.
buttons: Propio de nuestra extensión Buttons para nuestros botones de exportación.
columnDefs: Configuraciones extras por columnas, si es buscable o visible alguna columna en especial.
language: Esta parte del código nos permite traducir los mensajes más importantes de nuestra tabla a Español, este código no puede faltar.
Ahora que tenemos inicializada nuestra tabla veamos nuestro código PHP que obtiene la información.
Obteniendo la información desde Base de Datos
Aquí nos entraremos en detalles de conexión ni nada por el estilo, veamos el código más importante.
$sql = "SELECT idpieza, numdeparte, descripcion, ... FROM piezas ORDER BY numdeparte ASC;";
$result = mysqli_query($conn, $sql);
$c=0;
while($fila=$result->fetch_assoc()){
$data[$c]["idpieza"] = $fila["idpieza"];
$data[$c]["numdeparte"] = $fila["numdeparte"];
$data[$c]["descripcion"] = $fila["descripcion"];
...
...
$c++;
}
$results = ["sEcho" => 1,
"iTotalRecords" => count($data),
"iTotalDisplayRecords" => count($data),
"aaData" => $data ];
echo json_encode($results);En resumen para nuestro ejemplo de DataTables con server side nos conectamos a nuestra Base de datos, ejecutamos un SELECT y vamos guardando en una matriz la información.
Observa como los indices se llaman igual que en nuestro código Javascript en aoColumns.
También al final lo metemos en un objeto con otra información en $results.
Por último lo regresamos ( o imprimimos con un echo ) para recibirlo en nuestra inicialización de tabla en JavaScript.
Ahora veamos como luce!
Como puedes ver todo esta en Español con nuestros textos personalizados, aparecen justo 10 registros por página, coloca botones para exportar la información en Excel, CSV y PDF, coloca un buscador instantáneo excelente y la velocidad de carga de la información es bestial!
Conclusión
Con este ejemplo de DataTables con Server Side queremos mostrar las increíbles características de la librería y sobre todo recalcando la característica de Server Side y cómo nos puede ayudar a obtener grandes cantidades de información de mejor forma que cómo normalmente lo haríamos sin esta librería o incluso con esta librería pero sin hacer uso de la característica.
Considero que cualquier programador web que se respete debe de optimizar tiempo y esfuerzo así como ofrecer a sus clientes las mejores soluciones en desarrollo como considero que es utilizar DataTables en los proyectos.
Si esta información sobre DataTables con Server Side te fue de utilidad no olvides compartirla en tus redes sociales o dejarnos un comentario en la sección de abajo para aclarar cualquier duda relacionada al tema de hoy.
Hasta luego!