Diferencias

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

--- informatica:programacion:javascript:jquery:datatables [2021/07/13 10:40] – [CSV] tempwin
+++ informatica:programacion:javascript:jquery:datatables [2023/11/09 10:31] (actual) – [Idiomas] tempwin
@@ Línea 63: / Línea 63: @@
 <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>
@@ Línea 73: / Línea 104: @@
     $('#mi-tabla').DataTable({
         language: {
-            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
+            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