DataTable - El componente definitivo para enriquecer nuestras tablas

Siempre he pensado que las tablas y el muestreo de informacion son cosas necesarias. Pero tambien es verdad que generalmente solo mostramos los datos en una tabla y a correr. No es nuestro caso de ahora mismo, ya que vamos a utilizar un control fabuloso para poder aplicar elementos enriquecidos a nuestras tablas de datos. No penseis que es super complicado de implementar ya que no necesitamos tocar el codigo que tenemos ahora para implementarlo. Bastara con llamar a una funcion Javascript pasandole parametros de configuracion sobre un objeto que sera nuestra tabla y todo saldra a pedir de boca.



Para crear una tabla con algunas opciones enriquecidas primero tenemos que tener 2 elementos basicos:

- <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
- <link type="text/css" href="css/demo_table.css" rel="stylesheet">

Los encontraremos en la url de descarga del complemento "datetable" -->

http://datatables.net/release-datatables/examples/basic_init/dom.html

Y unos ejemplos de implementacion.

http://www.cristalab.com/tutoriales/listado-busqueda-y-paginacion-con-jquery.datatables-en-php-y-mysql-c105449l/

A priori es muy facil de implementar.

Dejo un codigo de ejemplo:

<script language="javascript">

$("table.display").hide();

$(document).ready(function(){

$("#latabla").dataTable({

"bPaginate" : true, // Hace aparecer la paginacion

"bLengthChange" : true, //Hace aparecer el campo de longitud de registros

"bFilter" : true, // Hace aparecer el campo de filtro o busqueda

"bSort" : true, //Hace que las cabeceras de la tabla sean sorteables

"bInfo" : true, // Muestra un campo de info de los registros mostrados

"bAutoWidth" : false, //

"bStateSave" : true, //mantiene entre recargas los valores de la busqueda, la longitud de registros etc...

"sDom" : '<"top"lpf><"top"i>rt<"bottom">', //Configura la posicion de los elementos enriquecidos de la tabla, paginador, longitud de registros, buscador, etc...

"sPaginationType": "full_numbers", //Configura el formato de los enlaces para la paginacion

"iDisplayLength": <?php echo $LIMITE; ?>, //valor por defecto para el control del length

"aLengthMenu" : [[<?php echo $LIMITE; ?>,10,15,20,-1],["Config",10,15,20,"All"]] //Define los valores para el array del length

});

$("table.display").show('slow');

$("input").focus();

})

</script>