DataTables, ¡tablas con estilo!

DataTables

DataTables es un plugin para la librería jQuery, por lo que debes tener esta librería para que funcione. Puedes entrar a JQuery.com para descargarla. Entre las principales ventajas que nos brinda el DataTables están:

  • Paginación
  • Herramienta de búsqueda
  • Permite ordenar columnas con un clic
  • Soporta varias fuentes de datos como: DOM, Javascript, Ajax, etc.
  • En cuanto a apariencia puedes integrarla con jQuery UI, Bootstrap o Foundation.

En la práctica verás algo como:

Data Table

DataTables tiene también bastante documentación, en inglés, que encuentras en datatables.net. Aquí te voy a explicar una configuración básica.

Recuerda que primero descargas la librería y la incluyes en tu proyecto. Ya que tienes esto, puedes comenzar a utilizarla. Vamos a suponer que quieres agregar el DataTables a la siguiente tabla HTML:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Posición</th>
                <th>Fecha de inicio</th>
                <th>Salario</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Nombre</th>
                <th>Posición</th>
                <th>Fecha de inicio</th>
                <th>Salario</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>

Entonces, debes agregar el siguiente script:

$(document).ready(function() {
    $('#example').DataTable();
} );

Como puedes observar, el id de la tabla es igual al que tienes en el script, es decir id=»example»; si lo tienes diferente no habrá referencia para que funcione.

Ahora bien, todos los datos de la tabla aparecerán por default, pero también puedes configurar las secciones de tu tabla. Por ejemplo:

 //Datatable sencilla que permite encabezados con rowspan
                 $(document).ready(function() {
                     $('#dtable').DataTable({
                         "dom": 'T<"clear">lfrtip',
                         "tableTools": {
                             "sRowSelect": "multi",
                             "aButtons": [
                                 {
                                     "sExtends": "select_none",
                                     "sButtonText": "Borrar selección"
                                 }]
                         },
                         "pagingType": "simple_numbers",
//Actualizo las etiquetas de mi tabla para mostrarlas en español
                         "language": {
                             "lengthMenu": "Mostrar _MENU_ registros por 
página.",
                             "zeroRecords": "No se encontró registro.",
                             "info": "  _START_ de _END_ (_TOTAL_ 
registros totales).",
                             "infoEmpty": "0 de 0 de 0 registros",
                             "infoFiltered": "(Encontrado de _MAX_ 
registros)",
                             "search": "Buscar: ",
                             "processing": "Procesando la información",
                             "paginate": {
                                 "first": " |< ",
                                 "previous": "Ant.",
                                 "next": "Sig.",
                                 "last": " >| "
                             }
                         }
                     });
                 } );

En el ejemplo anterior el id tendrá que llamarse dtable, en la opción PagingType determinamos que el tipo de paginación será con números, en la opción language estamos indicando los textos para los mensajes para las secciones de la tabla. Fácil, ¿no?

Para configurar el estilo de la tabla puedes elegir de las clases siguientes:

  • display
  • cell-border
  • compact
  • hover
  • nowrap
  • order-colum
  • row-border
  • stripe

Si quieres ver como queda una tabla, en la que aplicas cada una de estas clases,  solo basta con modificar el nombre de la clase en el ejemplo, que es display, por otra, en este caso hover:

<table id="example" class="hover" cellspacing="0" width="100%">

Si no quieres probar, también tienes la opción de entrar al sitio oficial de DataTables y ver los ejemplos en Default Styling. Estas clases lucen muy bien, pero si quieres cambiar el estilo a algo más parecido a tu sitio, DataTables te da una herramienta para que generes el CSS con solo seleccionar colores. Puedes probar y cuando quede de tu agrado solo descargas el código. Esta herramienta la encuentras en Theme creator.

¿Qué te pareció? ¿Fácil, cierto?. En el caso particular de Symfony2, preferimos usar este plugin que cualquier otro bundle hecho para las tablas, pues nos proporciona bastante flexibilidad.

¡Nos leemos pronto! Suscríbete y cuéntame que te pareció.

Deja un comentario

5 ideas sobre “DataTables, ¡tablas con estilo!”

A %d blogueros les gusta esto: