====== DataTables ====== Creación de tablas HTML avanzadas. * [[https://datatables.net/|Web oficial]] ===== 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 * Cuadro de búsqueda: ''searching'' * Información de la tabla: ''info'' * Paginación: ''paging'' * Ordenación: ''ordering'' ===== 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. * Solucionar problema con tablas pequeñas: https://www.datatables.net/forums/discussion/52178/fixedcolumns-problem-when-table-width-is-small ===== Exportar ===== Mediante plugins, DataTables permite exportar el contenido de la tabla en diferentes formatos * https://datatables.net/extensions/buttons/examples/initialisation/export ==== CSV ==== Si la tabla que nos interesa tiene el identificador ''tabla'':


$('#tabla').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'csv',
            text: ' 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:

==== Excel ==== Si la tabla que nos interesa tiene el identificador ''tabla'':


$('#tabla').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excel',
            text: ' 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:

===== 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'
        }
    });
} );

* [[https://datatables.net/plug-ins/i18n/Spanish.html|Spanish translation for DataTables]] ===== 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). ===== Navegación ===== ==== 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 ===== * [[https://datatables.net/manual/tech-notes/10|Cömo pedir ayuda en los foros oficiales]] * https://datatables.net/extensions/responsive/examples/initialisation/default.html * https://datatables.net/forums/discussion/16580/result-count-at-top * https://datatables.net/forums/discussion/33418/dom-elements-taking-up-an-entire-line-using-bootstrap-and-buttons * https://datatables.net/examples/api/show_hide.html * https://datatables.net/reference/option/columns.type * https://datatables.net/forums/discussion/14746/sorting-on-the-decimal-values-are-not-working * https://datatables.net/reference/option/initComplete * [[https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html|Fijar columnas]]