Измените язык интерфейса Datatables с помощью переключателя angular translate

в моем angularjs приложении я использую angular translate для смены языка

$scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
    tmhDynamicLocale.set(langKey);
};

app.config(function (tmhDynamicLocaleProvider) {
    tmhDynamicLocaleProvider.localeLocationPattern('bower_components_steora/angular-i18n/angular-locale_{{locale}}.js');
});

В HTML я вызываю функцию для выбранного языка и устанавливаю свой json с переведенными элементами.

<div class="jezik">
     <a class="languageSelect" ng-click="changeLanguage('hr')" translate="BUTTON_LANG_HR"></a> | 
     <a class="languageSelect" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></a> | 
     <a class="languageSelect" ng-click="changeLanguage('es')" translate="BUTTON_LANG_ESP"></a> | 
     <a class="languageSelect" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></a> | 
     <a class="languageSelect" ng-click="changeLanguage('it')" translate="BUTTON_LANG_IT"></a> | 
     <a class="languageSelect" ng-click="changeLanguage('fr')" translate="BUTTON_LANG_FR"></a>
</div>

У меня вопрос, как изменить angular datatables язык интерфейса так же, как язык приложения? Когда я меняю язык своего приложения, мне нужно изменить язык таблиц данных, я имею в виду «Показать записи», «Поиск:», «Показывать с 1 по 10 из 20 записей» и т. Д.

Я нашел это, но как изменить язык таблиц данных одним щелчком мыши с помощью angular translate изменение языка?

Я также нашел этот plnkr, но мне нужно сделать глобальное изменение не только в одном штат. Спасибо за мой английский


person Arter    schedule 28.02.2018    source источник


Ответы (1)


Я выполняю функцию и передаю переведенный элемент. Отметьте key из localstorage и предоставьте данные для выбранного языка

function selectedLanguageLocalStorage(localStorage) {
for (key in localStorage) {
    if (key == "NG_TRANSLATE_LANG_KEY"){
        langKey = localStorage[key];
        if (langKey == "en") {
            var language = {
                "sEmptyTable":     "No data available in table",
                "sInfo":           "Showing _START_ to _END_ of _TOTAL_ entries",
                "sInfoEmpty":      "Showing 0 to 0 of 0 entries",
                "sInfoFiltered":   "(filtered from _MAX_ total entries)",
                "sInfoPostFix":    "",
                "sInfoThousands":  ",",
                "sLengthMenu":     "Show _MENU_ entries",
                "sLoadingRecords": "Loading...",
                "sProcessing":     "Processing...",
                "sSearch":         "Search:",
                "sZeroRecords":    "No matching records found",
                "oPaginate": {
                    "sFirst":    "First",
                    "sLast":     "Last",
                    "sNext":     "Next",
                    "sPrevious": "Previous"
                },
                "oAria": {
                    "sSortAscending":  ": activate to sort column ascending",
                    "sSortDescending": ": activate to sort column descending"
                }
            }
        }else if (langKey == "it"){
            var language = {
                "sEmptyTable":     "Nessun dato presente nella tabella",
                "sInfo":           "Vista da _START_ a _END_ di _TOTAL_ elementi",
                "sInfoEmpty":      "Vista da 0 a 0 di 0 elementi",
                "sInfoFiltered":   "(filtrati da _MAX_ elementi totali)",
                "sInfoPostFix":    "",
                "sInfoThousands":  ".",
                "sLengthMenu":     "Visualizza _MENU_ elementi",
                "sLoadingRecords": "Caricamento...",
                "sProcessing":     "Elaborazione...",
                "sSearch":         "Cerca:",
                "sZeroRecords":    "La ricerca non ha portato alcun risultato.",
                "oPaginate": {
                    "sFirst":      "Inizio",
                    "sPrevious":   "Precedente",
                    "sNext":       "Successivo",
                    "sLast":       "Fine"
                },
                "oAria": {
                    "sSortAscending":  ": attiva per ordinare la colonna in ordine crescente",
                    "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
                }
            }
        }
        else if (langKey == "de"){
            var language = {
                "sEmptyTable":      "Keine Daten in der Tabelle vorhanden",
                "sInfo":            "_START_ bis _END_ von _TOTAL_ Einträgen",
                "sInfoEmpty":       "0 bis 0 von 0 Einträgen",
                "sInfoFiltered":    "(gefiltert von _MAX_ Einträgen)",
                "sInfoPostFix":     "",
                "sInfoThousands":   ".",
                "sLengthMenu":      "_MENU_ Einträge anzeigen",
                "sLoadingRecords":  "Wird geladen...",
                "sProcessing":      "Bitte warten...",
                "sSearch":          "Suchen",
                "sZeroRecords":     "Keine Einträge vorhanden.",
                "oPaginate": {
                    "sFirst":       "Erste",
                    "sPrevious":    "Zurück",
                    "sNext":        "Nächste",
                    "sLast":        "Letzte"
                },
                "oAria": {
                    "sSortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                    "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                },
                select: {
                        rows: {
                        _: '%d Zeilen ausgewählt',
                        0: 'Zum Auswählen auf eine Zeile klicken',
                        1: '1 Zeile ausgewählt'
                        }
                }
            }
        }
        else if (langKey == "es"){
            var language = {
                "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"
                }
            }
        }
        else if (langKey == "fr"){
            var language = {
                "sProcessing":     "Traitement en cours...",
                "sSearch":         "Rechercher&nbsp;:",
                "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                "sInfoPostFix":    "",
                "sLoadingRecords": "Chargement en cours...",
                "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
                "oPaginate": {
                    "sFirst":      "Premier",
                    "sPrevious":   "Pr&eacute;c&eacute;dent",
                    "sNext":       "Suivant",
                    "sLast":       "Dernier"
                },
                "oAria": {
                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                }
            }
        }
        else if (langKey == "hr"){
            var language = {
                "sEmptyTable":      "Nema podataka u tablici",
                "sInfo":            "Prikazano _START_ do _END_ od _TOTAL_ rezultata",
                "sInfoEmpty":       "Prikazano 0 do 0 od 0 rezultata",
                "sInfoFiltered":    "(filtrirano iz _MAX_ ukupnih rezultata)",
                "sInfoPostFix":     "",
                "sInfoThousands":   ",",
                "sLengthMenu":      "Prikaži _MENU_ rezultata po stranici",
                "sLoadingRecords":  "Dohvaćam...",
                "sProcessing":      "Obrađujem...",
                "sSearch":          "Pretraži:",
                "sZeroRecords":     "Ništa nije pronađeno",
                "oPaginate": {
                    "sFirst":       "Prva",
                    "sPrevious":    "Nazad",
                    "sNext":        "Naprijed",
                    "sLast":        "Zadnja"
                },
                "oAria": {
                    "sSortAscending":  ": aktiviraj za rastući poredak",
                    "sSortDescending": ": aktiviraj za padajući poredak"
                }
            }
        }
    }
}
return language;
};    

и здесь в DTOptions я вызываю функцию

vm.dtOptions = DTOptionsBuilder.newOptions().withLanguage(selectedLanguageLocalStorage(localStorage))

Таким образом, мне нужно поместить одни и те же данные во все ctrl, где я использую таблицы данных. И при смене языка мне нужно обновить, чтобы получить эти переведенные данные. Если у кого-то есть решение для этого, пожалуйста, напишите. Спасибо

person Arter    schedule 28.02.2018