
Cambiar el idioma de DataTables. En este artículo veremos cómo cambiar de idioma o traducir las variables de un DataTables. Sin embargo, resulta que en la tabla existen etiquetas como «show«, «search«, «previus«, «next» y demás en etiquetas en idioma Inglés que figura por defecto.
La idea del artículo es aprender a cambiar de idioma a español por ejemplo usando dos formas muy amigables para lograr nuestro objetivo.

Cambiar el idioma de DataTables: 2 formas
A continuación, veremos dos formas para convertir las etiquetas a otro idioma.
Declaración en línea
Si quieres evitar cargar más enlaces o hacer peticiones puedes manejar los textos directamente de la siguiente manera:
Nota: las propiedades de language pueden variar dependiendo de la versión de dataTables, en este caso funcionan bien con la versión más reciente (1.10.15)
La traducción se puede aplicar declarando estas líneas de código al momento de inicializar la DataTables, por ejemplo:
var table = $('#DataTablesClientes').DataTable({ language: { "decimal": "", "emptyTable": "No hay información", "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas", "infoEmpty": "Mostrando 0 to 0 of 0 Entradas", "infoFiltered": "(Filtrado de _MAX_ total entradas)", "infoPostFix": "", "thousands": ",", "lengthMenu": "Mostrar _MENU_ Entradas", "loadingRecords": "Cargando...", "processing": "Procesando...", "search": "Buscar:", "zeroRecords": "Sin resultados encontrados", "paginate": { "first": "Primero", "last": "Ultimo", "next": "Siguiente", "previous": "Anterior" } }, .... });
Fichero externo CDN de idiomas
Usando la opción language.url
se puede configurar un archivo JSON
para con la traducción.
$(document).ready(function() { $('#example').DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json" } }); });
Se puede cambian al idioma que deseamos siempre y cuando declarando el archivo correspondiente al idioma que se requiere. Si desean otro idioma pueden buscar el fichero de su idioma aquí.
Desde la propiedad language indicamos la ubicación del archivo json con la traducción de los parámetros y mensajes. Sin embargo, podemos declararlo bajo dos criterios:
Creando archivo JS
Creamos un archivo «Spanish.json
» y lo guardamos en la ubicación que deseamos. Dentro de este archivo colocamos el siguiente código.
Si usamos esta técnica tendremos que darle la ruta correcta al script para que pueda traducir a cualquier idioma y corre por nuestra cuenta esta declaración.
Ver demo{ "sProcessing": "Procesando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "No se encontraron resultados", "sEmptyTable": "Ningún dato disponible en esta tabla", "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros", "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros", "sInfoFiltered": "(filtrado de un total de _MAX_ registros)", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "sInfoThousands": ",", "sLoadingRecords": "Cargando...", "oPaginate": { "sFirst": "Primero", "sLast": "Último", "sNext": "Siguiente", "sPrevious": "Anterior" }, "oAria": { "sSortAscending": ": Activar para ordenar la columna de manera ascendente", "sSortDescending": ": Activar para ordenar la columna de manera descendente" } }
Usando CDN de idiomas
Si queremos evitarnos la creación del archivo y deseamos algo rápido y potente podemos usar CDN que viene en diversos idiomas a elegir y listos para usar. Entonces cuando cargue la página la tabla tomará la configuración de idioma que configuramos en el archivo.
Código completo HTML
Luego veremos el HTML en el cual en la etiqueta <head>
debemos de declaras las librerías y estilos necesarios para el funcionamiento del script y la inicialización de la DataTables.
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Nombre</th> <th>Posición</th> <th>Oficina</th> <th>Edad</th> <th>Fecha de inicio</th> <th>Salario</th> </tr> </thead> <tfoot> <tr> <th>Nombre</th> <th>Posición</th> <th>Oficina</th> <th>Edad</th> <th>Fecha de inicio</th> <th>Salario</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json" } }); }); </script> </body> </html>
Conclusión
En este artículo hemos aprendido a cambiar el idioma a las tablas dinámicas DataTables sin saber programación, solo declarando líneas de código a la inicialización.
Hemos aprendido 2 formas para implementar idiomas, una mediante líneas de código y otro usando un archivo CDN que se debe declarar en la inicialización.
Si queres saber más de los parámetros que se utilizan podés mirar la página oficial de DataTables
Espero que esta breve explicación les ayude a personalizar en el aspecto de idiomas a su Datatables.
Descarga
que va no me funciona
Hola Kamikase
He probado el script y si funciona
Se rcomienda que lo pruebe en un servidor de internet o servidor local (xamp)
Saludos