Tabla de Contenidos

DataTables

Creación de tablas HTML avanzadas.

Elementos

Cuando una tabla es gestionada por DataTables, hay ciertos elementos que se muestran por defecto:

Poner una captura de pantalla donde se vea una tabla con estos elementos

Fijar columnas

Si queremos que una columna se mantenga fija cuando nos desplacemos horizontalmente, en la inicialización de DataTables añadimos: 

fixedColumns: {
    leftColumns: 1
}

En leftColumns indicamos la posición de la columna que queremos fija. En este ejemplo sería la primera columna.

Exportar

Mediante plugins, DataTables permite exportar el contenido de la tabla en diferentes formatos

CSV

Si la tabla que nos interesa tiene el identificador tabla: 

$('#tabla').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'csv',
            text: '<i class="fa fa-download"></i> CSV', // Añadimos icono de Font Awesome al botón
            filename: 'nombre_fichero',
            fieldSeparator: ";" // Por defecto es una coma, como debe de ser
        }
    ]
});

Es necesario incluir: 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>

Excel

Si la tabla que nos interesa tiene el identificador tabla: 

$('#tabla').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excel',
            text: '<i class="fa fa-download"></i> CSV', // Añadimos icono de Font Awesome al botón
            filename: 'nombre_fichero', // la extensión se añade automáticamente
            title: null, // para que no muestre un título en la hoja de cálculo
            sheetName: "Hoja" // por defecto, pone "Sheet1"
        }
    ]
});

Es necesario incluir: 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
 
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>

Idiomas

Si queremos mostrar el texto que DataTables añade en otro idioma, tenemos dos opciones: añadir el texto que queramos o utilizar alguna traducción ya hecha. 

$(document).ready( function () {
    $('#mi-tabla').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        }
    });
} );

Ordenación

Deshabilitar ordenación inicial

$(document).ready( function () {
    $('#mi-tabla').DataTable({
        "order": []
    });
} );

Ordenar por una columna específica

$(document).ready( function () {
    $('#mi-tabla').DataTable({
        "order": [[4, "asc"]]
    });
} );

Ordenaría de forma ascendente por la columna 4 que es la que ocupa la quinta posición (la primera columna tiene el valor 0).

Longitud del menú

Muestra un selector para elegir el número de resultados que se visualizarán por página.

El siguiente fragmento mostrará las opciones de mostrar 10, 25, 50 o todos los registros: 

$('#example').dataTable( {
  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "Todo"] ]
} );

Opciones

Opción Descripción Ejemplo
ordering Habilitar/deshabilitar ordenación ordering: false

Recursos