Overriding parts of a translation

CanisLupus

I use the Swedish translation found here https://cdn.datatables.net/plug-ins/1.10.15/i18n/Swedish.json
This translation is excellent but I want to override parts of it anyway. I tried like this, but it does not work. Am I doing something wrong, or can't it be done?

"language": {
  "url": "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Swedish.json",
  "paginate": {
    "previous": "<--"
  }
},

allan

I'm afraid that at the moment the information from the JSON file will always take priority. In retrospect this was a mistake and I'll correct that in the next major version.

The workaround at the moment is to Ajax load the JSON field yourself using $.ajax or $.getJSON and then modify the language object before then initialising DataTables with it.

Allan

CanisLupus

Many thanks. I can live with how it works for now and make this change when you release the next major version of DataTables then. (Hope that won't be too far in the future.)

soullivaneuh

Hi allan,

Could you please ellaborate your workaround with a working code sample?

Thanks.

allan

$.ajax( {
  url: ...,
  success: function ( json ) {
    $.extend( true, json.language, {
      search: 'Filter:'
    } );

   $('#myTable').DataTable( {
     language: json.language
   } );
  }
} );

Allan

soullivaneuh

Thank allan, but I'm not sure your sample will work.

For example, you are overriding search. But the language keyword is sSearch.

BTW, if I just put the fetched language without any modification, it does not work at all, nothing is translated.

Also, from where json.language comme from? I don't see any language key on the lang files.

allan

sSearch is the legacy name. language.search is the current one.

Also, from where json.language comme from? I don't see any language key on the lang files.

I was assuming you'd be loading other data as well. If the json response is only the language object, then only use that.

Allan

soullivaneuh

I finally manage it like this:

  $.getJSON(languageUrl, (remoteLanguage) => {
    options.language = {
      emptyTable: $element.data('empty-message') ? $element.data('empty-message') : remoteLanguage.sEmptyTable,
      info: remoteLanguage.sInfo,
      infoEmpty: remoteLanguage.sInfoEmpty,
      infoFiltered: remoteLanguage.sInfoFiltered,
      infoPostFix: remoteLanguage.sInfoPostFix,
      infoThousands: remoteLanguage.sInfoThousands,
      lengthMenu: remoteLanguage.sLengthMenu,
      loadingRecords: remoteLanguage.sLoadingRecords,
      processing: '<i class="fa fa-refresh fa-2x fa-spin" aria-hidden="true"></i>',
      search: remoteLanguage.sSearch,
      zeroRecords: remoteLanguage.sZeroRecords,
      // eslint-disable-next-line sort-keys
      paginate: {
        first: remoteLanguage.sFirst,
        last: remoteLanguage.sLast,
        next: '>',
        previous: '<',
      },
      // eslint-disable-next-line sort-keys
      aria: {
        sortAscending: remoteLanguage.sSortAscending,
        sortDescending: remoteLanguage.sSortDescending,
      },
    };

    $element.data('data-table', {
      extraData: extraData,
      instance: $element.DataTable(options),
    });
  });
});