DataTables

Cambiar el idioma de DataTables: 2 formas

¿Cómo cambiar el idioma de DataTables?

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
Cambiar el idioma de DataTables

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.

Ver demo
<!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

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

2 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad