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.

jquery
Datatables JQuery

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!

Carlos Dk

Apasionado por la enseñanza y el SEO

9 comentarios en “Como traducir Datatable JQuery

  • el 5 octubre, 2015 a las 7:46 pm
    Permalink

    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 });

    Respuesta
  • el 5 octubre, 2015 a las 7:59 pm
    Permalink

    Ya solucionado GRACIAS!!!!

    Excelente aportación!!!

    Respuesta
  • el 27 abril, 2016 a las 3:22 pm
    Permalink

    Excelente!!
    y muy claro 🙂

    Muchas gracias

    Respuesta
  • el 25 enero, 2017 a las 4:40 pm
    Permalink

    $(‘#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»
    }
    }
    });

    Respuesta
  • el 12 diciembre, 2019 a las 4:11 pm
    Permalink

    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.

    Respuesta
    • el 12 diciembre, 2019 a las 5:21 pm
      Permalink

      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 😉

      Respuesta

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.