When live switching the language with angular-translate, angular-datatables does not change/recognise the current language

I use angular-translate with angular-datatables and implemented a language switch between german and english (Explained here: http://angular-translate.github.io/docs/#/guide/07_multi-language ) Switching language works well but not with angular-datatables. When i switch angular-datatables keeps the old translations for the table header.

*angular-datatables Controller:

It’s loading the datatables data via json with a promise and then draws the table. It also refreshes the table every 5 minutes. I implemented a public function “rerenderTable” which i call when switching the app language.

controller('DashboardCtrl', ['$scope', '$rootScope', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTInstances', '$resource',
    '$interval', '$translate',
    function($scope, $rootScope, DTOptionsBuilder, DTColumnBuilder, DTInstances, $resource, $interval, $translate)
{
    $scope.initTargetPackaging = function initTargetPackaging()
    {
        $scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson1.json';
    };

    $scope.initTargetConversion = function initTargetConversion()
    {
        $scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson2.json';
    };

    // Get the TargetPackaging JSON Data with promise AJAX call
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromFnPromise( function()
    {
        return $resource($scope.sourceUrl).query().$promise;
    })
        .withOption('bInfo', false)
        .withOption('paging', false)
        .withOption('filter', false)
        .withOption('rowCallback', rowCallback);

    // Create the table columns
    vm.dtColumns = [
        DTColumnBuilder.newColumn('customer')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_CUSTOMER')),
        DTColumnBuilder.newColumn('today')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_TODAY')),
        DTColumnBuilder.newColumn('week')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_7DAYS')),
        DTColumnBuilder.newColumn('month')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_30DAYS'))
    ];

    vm.newPromise = newPromise;
    vm.reloadData = reloadData;
    vm.dtInstance = {};

    function newPromise()
    {
        return $resource($scope.sourceUrl).query().$promise;
    }

    /**
     * Reload the data
     */
    function reloadData()
    {
        var resetPaging = false;
        vm.dtInstance.reloadData(resetPaging);
    }

    // Trigger reloading - 5 mins
    $interval(reloadData, 300000);

    function rowCallback(nRow, aData)
    {
        // Add status CSS class if state is true
        if (aData['state'] != undefined
            && aData['state'] === true)
        {
            $(nRow).addClass('ad-status-inactive');
        }
    }

    $rootScope.rerenderTable = function()
    {
        vm.dtInstance.rerender();
    };
}]);

Function to switch language:

$scope.changeLang = function(key)
{
    $translate.use(key).then( function(key)
    {
        console.log("Sprache zu " + key + " gewechselt.");
        $rootScope.rerenderTable();
    },
    function(key)
    {
        // Trigger log error message (failure of switching language)
    });
};

Triggered here in html:

<div id="language-switch" class="col-xs-2" ng-controller="LanguageCtrl">
    <div class="inner">
        {{ 'MAIN_NAVIGATION.CHOOSE_LANGUAGE' | translate }}
        <span ng-click="changeLang('en')" class="lang-sm" lang="en"></span>
        <span ng-click="changeLang('de')" class="lang-sm" lang="de"></span>
    </div>
</div>

Summary: Switching languages works well. But not in the case of angular-datatables. It does not switch the language. But translating the strings is fine.

How do i get angular-datatables to rerender the table by using the currently chosen language?

[haiboli]

分享下我的解决方式 first： vm.dtColumns = [ DTColumnBuilder.newColumn(‘customer’) .withTitle(‘{{“DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_CUSTOMER"|translate}}’)), ]; second：

.withOption(‘headerCallback’, headerCallback)

var headerCallback = function( thead, data, start, end, display ) { $compile(angular.element(thead).contents())($scope); }

[CamiloMartinez123]

1- Listen to the language change to render the table afterwards.

  $rootScope.$on('$translateChangeEnd', function (event, lang) {
    $scope.dtInstanceDocsSign.rerender();
  });

2-Inside constructor function of your table

     var headerCallback = function( thead, data, start, end, display ) {
            $compile(angular.element(thead).contents())($scope);
     }

3-

     $scope.dtOptions(your name) = DTOptionsBuilder
      .newOptions()
      .withOption('headerCallback', headerCallback)
      ..........your code

   $scope.dtColumns = [
     DTColumnBuilder.newColumn('code').withTitle(`${'<span translate>'}${'TAG'}${'</span>'}`).renderWith(your_code).withClass('center-text'),
    .........

Works for me 😉