Como traducir Datatable JQuery
Bienvenid@s a Vertutoriales.com, en esta ocasión os vengo a explicar como podéis traducir datatables, esta librería de JQuery con la que podéis trabajar mucho más fácilmente las grillas de datos.
La traducción de las datatables no es nada complicado ya que el propio método acepta un array en JSon con el que pasarle exactamente la información que necesita para cambiar los valores mostrados, de esta manera la traducción se hace fácil y rápida, solo hay que investigar un poco los diferentes parámetros a traducir, veamos los más comunes:
$('#tablaRegistros').dataTable(
{
"ajax": {
"url": "./modulos/usuarios/dk-logica.php",
"type": "POST",
data: {"accion":"listaRegistros"
}
},
"columns": [
{ "data": "nombre" },
{ "data": "email" },
{ "data": "tlf1" },
{ "data": "fechaAlta" },
{ "data": "fechaBaja" },
{ "data": "acciones" }
],
"bDeferRender": true,
"oLanguage": {
"sEmptyTable": "No hay registros disponibles",
"sInfo": "Hay _TOTAL_ registros. Mostrando de (_START_ a _END_)",
"sLoadingRecords": "Por favor espera - Cargando...",
"sSearch": "Filtro:",
"sLengthMenu": "Mostrar _MENU_",
"oPaginate": {
"sLast": "Última página",
"sFirst": "Primera",
"sNext": "Siguiente",
"sPrevious": "Anterior"
}
}
});En el anterior código explico como se le pasa el array oLanguage para que veáis exactamente como añadirlo a vuestra datatable. Si os fijáis está compuesto a su vez por otro array que incluye los diferentes parámetros a traducir, paso a definirlos:
"sEmptyTable": "No hay registros disponibles", (Si la tabla está vacía)
"sInfo": "Hay _TOTAL_ registros. Mostrando de (_START_ a _END_)", (información a pie de página que incluye tres variables _TOTAL_, _START_ y _END_, el total de registros en la datatable, el principio y el fin desde donde pagina.
"sLoadingRecords": "Por favor espera - Cargando...", (mensaje que muestra mientras está cargando la información el datatable)
"sSearch": "Filtro:", (El texto al lado de la caja de texto para buscar)
"sLengthMenu": "Mostrar _MENU_", (el texto al lado de la caja de registros por página)
"oPaginate": { (el menú de la paginación compuesto por más valores)
"sLast": "Última página", (texto para última página)
"sFirst": "Primera", (texto para primera página)
"sNext": "Siguiente", (texto para siguiente página)
"sPrevious": "Anterior" (texto para anterior página)
Estos valores no son todos, pero a mi parecer son los más usados, si queréis ver todos los parámetros que acepta una datatable a traducir, podéis visitar el siguiente enlace: http://legacy.datatables.net/usage/i18n
Si tenéis cualquier consulta no dudéis en comentarla y os ayudaré en lo que esté en mi mano. Si os ha gustado podéis seguirme desde Facebook y Youtube como VerTutoriales. Sino os ha gustado comentad como lo mejorarías 😉
Seguimos avanzando!
Ya probe y no me funciona el detalle es que basado en ejemplo que encontré en la web , en teoría debería cambiar el texto de ingles a español pero no lo hace este es el código que tengo para la tabla…
$(document).ready(function() {
var oTable = $(‘#Tabla’).dataTable({
bJQueryUI: true
«aquí inserto lo que comentas pero no funciona»
}).makeEditable({ aquí otra serie de codigo}); mas código });
Ya solucionado GRACIAS!!!!
Excelente aportación!!!
Nada 😀 no me dio tiempo a entrar y responder 😀
Excelente!!
y muy claro 🙂
Muchas gracias
Nada 🙂 Esto de las datatables es sencillo cuando se conoce 😉
$(‘#sample_2’).dataTable(
{
«oLanguage»: {
«emptyTable»: «No hay datos disponibles en la tabla»,
«sEmptyTable»: «No hay registros disponibles»,
«sInfo»: «Hay _TOTAL_ registros. Mostrando de (_START_ a _END_)»,
«sLoadingRecords»: «Por favor espera – Cargando…»,
«sSearch»: «Buscar:»,
«sLengthMenu»: «Mostrar _MENU_»,
«oPaginate»: {
«sLast»: «Última página»,
«sFirst»: «Primera»,
«sNext»: «Siguiente»,
«sPrevious»: «Anterior»
}
}
});
Gracias por el aporte 😉
Hola, necesito saber como poder traducir o hacer cambio de idioma a los valores que se cargan dentro de la tabla, no el idioma de los encabezados ni los textos por defecto, sino los que se guardan y se muestran en ella.
Creo que no entendí bien la pregunta, pero…:
La información que se muestra en una datatable es información tuya propia o de tus usuarios, esa información la deberás de tener ya traducida. Si lo que que quieres es que cargue información traducida, la has debido de cambiar anteriormente 😉