Angular translate not working in angular datatable's custom pagination and info

Question

I am using Angular Datatable and Angular Translate in my current project.

I've created a custom pagination & info for datatable as bellow:

var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    "sInfo": "show <b>_START_</b> until <b>_END_</b> of <b>_TOTAL_</b> records",
    "sInfoEmpty": "show 0 until 0 of 0 records",
    "sInfoFiltered": "(filtered of _MAX_ records)",
    "sInfoPostFix": "",
    "sInfoThousands": ",",
    "sLengthMenu": "show _MENU_ records",
    "sLoadingRecords": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $filter('translate')('GLOBAL.LOADING') + "</span> </div>",
    "sProcessing": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $translate.instant('TABLE.S_PROCESSING') + "</span> </div>",
    "sSearch": "search", 
    "sZeroRecords": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_ZERO_RECORDS') + "</div>",
    "oPaginate": {
       "sFirst": "<span class='mdi mdi-chevron-double-left' title='first'></span>",
       "sLast": "<span class='mdi mdi-chevron-double-right' title='last'></span>",
       "sNext": "<span class='mdi mdi-chevron-right' title='next'></span>",
       "sPrevious": "<span class='mdi mdi-chevron-left' title='prev'></span>"
    },
    "oAria": {
       "sSortAscending": "",
       "sSortDescending": ""
    }
};

And datatable options is:

$rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withDataProp('data')
    .withOption('initComplete', function() {
       angular.element('.table input').attr('placeholder', 'search...');
    })
    .withPaginationType('full_numbers');

app.config

$translateProvider.useStaticFilesLoader({
    prefix: 'app/resources/lang-', // path to translations files
    suffix: '.json'
 });
 $translateProvider.preferredLanguage('en'); // default language
 $translateProvider.useSanitizeValueStrategy('sanitize');
 $translateProvider.useLocalStorage(); // saves selected language to localStorage

lang-en.json

...
{
  "TABLE": {
      "S_PROCESSING": "peoesing...",
      "S_ZERO_RECORDS": "no rcordfound",
      "LOADING": "ding..."
  }
}
...

Now I want to use angular translate in this custom pagination and info.(look at var language= {})

I have used

$filter('translate')('GLOBAL.LOADING') And $translate.instant('TABLE.S_PROCESSING')

But both of them not working and the string of each translate variable is shown for example: GLOBAL.LOADING or TABLE.S_PROCESSING instead of it's translation!

Where is The problem?

Answer 1

I wanted to use $translate before any translation, because of that, It doesn't work correctly. So I used $translateChangeSuccess event(one of angular translate events) and in callback function, Call a function that have datatable options and configs.

$rootScope.$on('$translateChangeSuccess', function (event) {
    datatableInit();
});


function datatableInit() {

  var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    "sInfo": "show <b>_START_</b> until <b>_END_</b> of <b>_TOTAL_</b> records",
    "sInfoEmpty": "show 0 until 0 of 0 records",
    "sInfoFiltered": "(filtered of _MAX_ records)",
    "sInfoPostFix": "",
    "sInfoThousands": ",",
    "sLengthMenu": "show _MENU_ records",
    "sLoadingRecords": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $filter('translate')('GLOBAL.LOADING') + "</span> </div>",
    "sProcessing": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $translate.instant('TABLE.S_PROCESSING') + "</span> </div>",
    "sSearch": "search", 
    "sZeroRecords": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_ZERO_RECORDS') + "</div>",
    "oPaginate": {
       "sFirst": "<span class='mdi mdi-chevron-double-left' title='first'></span>",
       "sLast": "<span class='mdi mdi-chevron-double-right' title='last'></span>",
       "sNext": "<span class='mdi mdi-chevron-right' title='next'></span>",
       "sPrevious": "<span class='mdi mdi-chevron-left' title='prev'></span>"
    },
    "oAria": {
       "sSortAscending": "",
       "sSortDescending": ""
    }
  };

  $rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withDataProp('data')
    .withOption('initComplete', function() {
       angular.element('.table input').attr('placeholder', 'search...');
    })
    .withPaginationType('full_numbers');

});