EL día de hoy trabajando en un proyecto, tuve la necesidad de mostrar los registros en una tabla, normalmente cuando son bastantes me gusta usar DataTables ya que integra varias opciones como la paginación, un buscador y exportar los datos en varios formatos, lo cual facilita la consulta de la información.
Por defecto, este plug-in de jQuery viene en inglés, pero es muy fácil hacer la traducción.
Lo que tenemos que editar el el script de DataTables agregando la siguiente linea:
1 2 3 | "language": { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json" } |
Esté es el script original
1 2 3 | $(document).ready( function () { $('#table_id').DataTable(); } ); |
Y ya con la la línea de código quedaría de la siguiente manera:
1 2 3 4 5 6 7 | $(document).ready( function () { $('#table_id').DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json" } }); } ); |
Aquí el resultado ya con todos los textos traducidos, aunque no tengo activadas todas las opciones, traduce al 100% todos los textos que trae el plugin.
Si está forma no te funcionará, puedes hacerlo con esté otro código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | $(document).ready( function () { $('#table_id').DataTable(); } ); $.extend( true, $.fn.dataTable.defaults, { "language": { "decimal": ",", "thousands": ".", "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros", "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros", "infoPostFix": "", "infoFiltered": "(filtrado de un total de _MAX_ registros)", "loadingRecords": "Cargando...", "lengthMenu": "Mostrar _MENU_ registros", "paginate": { "first": "Primero", "last": "Último", "next": "Siguiente", "previous": "Anterior" }, "processing": "Procesando...", "search": "Buscar:", "searchPlaceholder": "Término de búsqueda", "zeroRecords": "No se encontraron resultados", "emptyTable": "Ningún dato disponible en esta tabla", "aria": { "sortAscending": ": Activar para ordenar la columna de manera ascendente", "sortDescending": ": Activar para ordenar la columna de manera descendente" }, //only works for built-in buttons, not for custom buttons "buttons": { "create": "Nuevo", "edit": "Cambiar", "remove": "Borrar", "copy": "Copiar", "csv": "fichero CSV", "excel": "tabla Excel", "pdf": "documento PDF", "print": "Imprimir", "colvis": "Visibilidad columnas", "collection": "Colección", "upload": "Seleccione fichero...." }, "select": { "rows": { _: '%d filas seleccionadas', 0: 'clic fila para seleccionar', 1: 'una fila seleccionada' } } } } ); |
Espero te sea de utilidad, saludos.