Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:javascript:jquery:datatables [2021/02/01 12:26] – [CSV] tempwin
+++ informatica:programacion:javascript:jquery:datatables [2023/11/09 10:31] (actual) – [Idiomas] tempwin
@@ Línea 18: / Línea 18: @@
   * 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:
+<code javascript>
+fixedColumns: {
+    leftColumns: 1
+}
+</code>
+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 =====
@@ Línea 52: / Línea 64: @@
 <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
 </code>
+==== Excel ====
+Si la tabla que nos interesa tiene el identificador ''tabla'':
+<code javascript>
+$('#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"
+        }
+    ]
+});
+</code>
+Es necesario incluir:
+<code html5>
+<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>
+</code>
+===== 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.
+<code javascript>
+$(document).ready( function () {
+    $('#mi-tabla').DataTable({
+        language: {
+            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
+        }
+    });
+} );
+</code>
+  * [[https://datatables.net/plug-ins/i18n/Spanish.html|Spanish translation for DataTables]]
+===== Ordenación =====
+==== Deshabilitar ordenación inicial ====
+<code javascript>
+$(document).ready( function () {
+    $('#mi-tabla').DataTable({
+        "order": []
+    });
+} );
+</code>
+==== Ordenar por una columna específica ====
+<code javascript>
+$(document).ready( function () {
+    $('#mi-tabla').DataTable({
+        "order": [[4, "asc"]]
+    });
+} );
+</code>
+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:
+<code javascript>
+$('#example').dataTable( {
+  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "Todo"] ]
+} );
+</code>
+===== 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