2

Por poneros en situación, estoy en pleno proceso de refactor del proyecto en el que estoy trabajando. Concretamente, el de los datatables de jQuery, donde el código referido a los parámetros de las tablas estaba repetido en multitud de páginas.

Esos parámetros los llamaba directamente desde la vista, y entre estos parámetros, hay parámetros de traducción de lenguaje de algunos campos clave del datatable. Para traducirlos, llamo a una función que tengo en PHP de este modo {{ función('parámetro') }}, ya que Laravel me lo permite. Funcionaba perfectamente y los literales me los traducía sin problemas; no obstante, como digo, al tener código repetido en muchísimas páginas del proyecto, si tenía que modificar algún literal, lo tenía que hacer en un montón de páginas.

Para evitar esto, he encapsulado todo este código en un fichero js y desde la vista lo referencio y cargo en el datatable. Funciona perfecto, pero los literales me los muestra tal cual, sin que tengan en cuenta la función PHP de traducción.

Fichero JS

var DatatableParameters = {
    "bPaginate": true,
    "pagingType": "full_numbers",
    "bLengthChange": false,
    "bInfo": true,
    "bAutoWidth": false,
    "bFilter": true,
    "language": {
        "emptyTable": "{{Tr('No se encontraron datos a mostrar')}}", 
        "loadingRecords": "{{Tr('Cargando datos...')}}",
        "processing": '<div class="m-loader"></div>',
        "search": "{{Tr('Buscar')}}",
        "info": "{{Tr('Mostrando página ')}} _PAGE_ {{Tr(' de ')}} _PAGES_",
        "infoEmpty": "{{Tr('Sin registros')}}",
        "infoFiltered": "{{Tr('(filtrando de un total de ')}} _MAX_ {{Tr(' registros')}}'",
        "zeroRecords": "{{Tr('No se encontraron datos a mostrar')}}",
        "paginate": {
            "first": "<<",
            "previous": "<",
            "next": ">",
            "last": ">>"
        }
    }
};

Vista

<script src="{{ asset('js/datatable-params.js') }}"></script>

<script>       
    $(document).ready(function(){
        var table = $('#table').DataTable($.extend( true, {}, {
        }, DatatableParameters));
    });
</script>

Y el resultante, como podéis ver, con el literal tal cual está en el fichero:

Resultante

Entonces, mi pregunta es: ¿Cómo puedo conseguir traducir el literal que tengo en el fichero JS?

2 respuestas 2

3

Al final he dado con la tecla, siguiendo las recomendaciones de este post (en inglés)

Como son pocos literales, he creado un pequeño "diccionario" de traducciones en el propio fichero y llamo a los literales del diccionario en base al idioma de la página (que se pone automáticamente de forma dinámica después de hacer login de usuario en función del idioma que tenga en la ficha).

Ahora es cuestión de llenar el diccionario con los idiomas que falten (sólo tengo 3) y listo.

Por lo tanto, el fichero javascript queda así.

var languageCode = $('html').attr('lang');

lang = {
    "es-ES" : {
        emptyTable: 'No se encontraron datos a mostrar',
        loadingRecords: 'Cargando datos...',
        search: 'Buscar',
        info: 'Mostrando página',
        infoEmpty: 'Sin registros',
        de: 'de',
        infoFiltered: 'Filtrando de un total de ',
        registros: ' registros',
        zeroRecords: 'No se encontraron datos a mostrar'
    }
}

var DatatableParameters = {
    "bPaginate": true,
    "pagingType": "full_numbers",
    "bLengthChange": false,
    "bInfo": true,
    "bAutoWidth": false,
    "bFilter": true,
    "language": {
        "emptyTable": lang[languageCode].emptyTable, 
        "loadingRecords": lang[languageCode].loadingRecords,
        "processing": '<div class="m-loader"></div>',
        "search": lang[languageCode].search,
        "info": lang[languageCode].info + " _PAGE_ " + lang[languageCode].de + " _PAGES_",
        "infoEmpty": lang[languageCode].infoEmpty,
        "infoFiltered": lang[languageCode].infoFiltered + " _MAX_ " + lang[languageCode].registros,
        "zeroRecords": lang[languageCode].zeroRecords,
        "paginate": {
            "first": "<<",
            "previous": "<",
            "next": ">",
            "last": ">>"
        }
    }
};

Y el resultante desde la vista es correcto, ya aparece con el literal de la traducción:

Resultante

2
  • Me alegra que hayas dado con la solución! Por favor, da como aceptada tu respuesta para que pueda servirle a alguien con tu mismo problema
    – Lucía
    Commented el 22 ene. 2020 a las 9:40
  • 1
    Hola Lucia. Si, pero las respuestas propias tienen que pasar 2 días para aceptarlas, no me deja hacerlo al mismo momento. Me lo anoto para el viernes. Gracias! Commented el 22 ene. 2020 a las 9:41
0

otra opción que te permite laravel es usar la funcion lang desde blade

basta con definir un archivo tipo json, en la ruta resources > lang > codigo_de_idioma.json

por ejemplo para tener un archivo de traducción de ingles a español, creamos el archivo es.json

introducir la descripción de la imagen aquí

Las traducciones son literales, tal como los escribes en tu html tienes que escribirlo en el archivo .JSON, y el idioma es tomado automáticamente de la etiqueta <html lang="es">

el archivo se arma de la siguiente forma:

"texto a traducir" : "Traduccion"

Ejemplo:

 {
     "Reset Password": "Restablecer contraseña",
     "Hello!": "Hola!"
 }

Para hacer uso de la funcion lang en Laravel Blade, es de la siguiente forma:

{{ __('Reset Password') }}

Obteniendo como resultado la traducción literal: Restablecer contraseña

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.