10 maneras de personalizar Datatables

En este POST te voy a mostrar diferentes personalizaciones que me parecen interesantes a la hora de poder personalizar tu Datatables, algunas me han resultado fáciles y otras se me atascaron un poquito, pero al final todo salió satisfactorio.

El objetivo de este artículo es que os voy a mostrar 10 ejemplos por el que me resultan imprescindibles estas modificaciones, ya que la estructura inicial de Datatables, es un poco escasa.

¡Empezamos por las personalizaciones!

Traducir a español

Por defecto, el plugin de Datatables está en inglés, pero podemos traducirlo sin ningún problema.

Podemos incluir este código, en el que, modificando a mano, podemos traducirlo. En nuestro caso lo traduciremos a español:

language: {
    "decimal": ",",
    "thousands": ".",
    "lengthMenu": "Mostrar _MENU_ registros",
    "zeroRecords": "No se encontraron resultados",
    "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
    "infoFiltered": "(filtrado de un total de _MAX_ registros)",
    "sSearch": "Buscar:",
    "oPaginate": {
        "sFirst": "Primero",
        "sLast":"Último",
        "sNext":"Siguiente",
        "sPrevious": "Anterior"
    },
    "sProcessing":"Cargando..."
}

También podemos enlazar las traducciones automáticamente a través de un fichero .json que nos facilita el desarrollador:

language: {
    "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
}

Exportar registros de Datatables a Excel, PDF e Impresora

Tenemos otra utilidad en el que nos permite exportar todos los registros del Datatables al portapapeles, Excel, CSV, PDF y enviarlo a la impresora directamente. En este ejemplo sólo vamos a exportar a Excel, PDF y a la impresora.

buttons:[ 
    {
            extend:    'excelHtml5',
            text:      'Exportar a Excel',
            titleAttr: 'Exportar a Excel',
            title:     'Título del documento',
            exportOptions: {
                columns: [2,3,4,5]
            }
    },
    {
            extend:    'pdfHtml5',
            text:      'Exportar a PDF',
            titleAttr: 'Exportar a PDF',
            className: 'btn btn-danger',
            title:     'Título del documento',
            exportOptions: {
                columns: [2,3,4,5]
            }                    
    },
    {
            extend:    'print',
            text:      'Imprimir',
            titleAttr: 'Imprimir',
            className: 'btn btn-info',
            exportOptions: {
                columns: [2,3,4,5]
            }
    }
]     

En exportOptions, podemos seleccionar qué columnas queremos exportar. Desde la columna 0 (inicial) hasta el número las que tengamos en total, menos 1. Funciona como las posiciones de un Array.

Guardar el valor buscado en Datatables

Con stateSave almacenaremos información como la posición de la paginación, la longitud de visualización, el filtrado y la clasificación. Cuando esta opción de inicialización está activa (true) y el usuario final vuelve a cargar la página, el estado de la tabla se modificará para que coincida con lo que había configurado anteriormente. Os enseño cómo implementarlo:

stateSave: true

Mostrar imágenes en los registros del Datatable

Seguramente que en algún campo, almacenaremos la ruta de una foto, como puede ser el avatar de un usuario, cliente, artículos…, etc. Lo que tenemos que hacer, es renderizarlo. El columna que recogemos esa información se llama “foto”. Os dejo el siguiente ejemplo:

"columns": [

    { 
        "data": "foto",
        render: function (data, type, row) {
            return "<img src='"+data+"' alt='"+data+"'/>";
        }
    }

Modificar el orden de los elementos de Datatables

DataTables añade los elementos alrededor de la tabla para poder controlar y mostrar información adicional sobre ella. La posición de estos elementos se controla mediante una combinación de su orden en DOM y CSS aplicado a los elementos. Este parámetro se utiliza para controlar su orden y el marcado adicional que los rodea en el DOM.

Cada elemento de control de tabla en DataTables tiene una sola letra asociada. Y estas son las letras asociadas:

Elementos

• B: Botonera de exportaciones de datos.
• f: Campo de búsqueda.
• i: Información sobre los registros.
• t: Tabla completa.
• r: El preloader de “Cargando…”.
• l: Desplegable de mostrar x registros
• p: Paginación de los registros.

Posiciones

• <>: Etiqueta DIV.
• <“”>: Clase de un DIV.
• <“#”>: ID de un DIV.
• <“#ID.clase”>: Combinación entre ID y class.

Yo lo tengo configurado de la siguiente manera:

"dom": '<"toolbar">Bftrip'

Ordenar por fecha en Datatables

Para poder ordenar un campo que tiene de datos una fecha. Es obligatorio utilizar el plugin moment.js. Os dejo un post del foro oficial de Datatables, que trata sobre ello.

"columnDefs": [

        {
                targets: 1,
                render: $.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss', 'DD/MM/YYYY HH:mm:ss' )
        }             
]

Ocultar campos del Datatables

Si queremos ocultar columnas de nuestra estructura de datos en nuestra tabla, tenemos que utilizar:(targets es el número de columna del dataset)

"columnDefs":[
    {
        "targets": [0,1],
        "visible": false,
    }            
     
]

No ordenar campos del Datatables

Si queremos que no nos salgan las pestañas de ordenar en determinadas columnas, tenemos que utilizar: (targets es el número de columna del dataset).

No buscar datos de la columna del campo Buscar de Datatables

Si queremos filtrar la búsqueda en determinadas columnas, tenemos que utilizar: (targets es el número de columna del dataset).

"columnDefs":[
    {
        "targets": [ 0 ],

        "searchable": false,

    }     
]

Actualizar tabla automáticamente después de registrar,actualizar o eliminar un registro de Datatables

Si tenemos una estructura montada en el que, al pulsar un registro o botón, y nos muestre una ventana modal, podemos mandar a la petición Ajax (cuando sea done) una actualización de los datos. El objeto del datatable del ejemplo se llama tabla, con sustituir como lo tenéis declarado vosotros os vale:

tabla.ajax.reload(null, false);

Así tengo mi Datatables, ¿Y el vuestro? Espero que te haya servido de ayuda estas personalizaciones :). Si tienes alguna personalización que aportar, indícamelo en los comentarios y modificamos este artículo.

Aquí te dejo unos enlaces si quieres ver más utilidades de JavaScript o jQuery