Creación de tablas HTML avanzadas.

• Web oficial

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

• Cuadro de búsqueda: searching
• Información de la tabla: info
• Paginación: paging
• Ordenación: ordering

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

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

• https://datatables.net/extensions/buttons/examples/initialisation/export

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>

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>

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.11.5/i18n/es-ES.json'
        }
    });
} );

• Spanish translation for DataTables

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

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, "All"] ]
} );

• 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
• Fijar columnas