Datatables change interface language Datatables change interface language angularjs angularjs

Datatables change interface language


You need to define a language struct like this (danish implementation, what I am using in my angular-datatables apps) :

var language = {  "sEmptyTable": "Ingen tilgængelige data (prøv en anden søgning)",  "sInfo": "Viser _START_ til _END_ af _TOTAL_ rækker",  "sInfoEmpty": "Viser 0 til 0 af 0 rækker",  "sInfoFiltered": "(filtreret ud af _MAX_ rækker ialt)",  "sInfoPostFix": "",  "sInfoThousands": ",",  "sLengthMenu": "Vis _MENU_ rækker",  "sLoadingRecords": "Henter data...",  "sProcessing": "Processing...",  "sSearch": "Filter:",  "sZeroRecords": "Ingen rækker matchede filter",  "oPaginate": {    "sFirst": "Første",    "sLast": "Sidste",    "sNext": "Næste",    "sPrevious": "Forrige"  },  "oAria": {    "sSortAscending": ": activate to sort column ascending",    "sSortDescending": ": activate to sort column descending"  }}

There is a bunch of languages here -> https://www.datatables.net/plug-ins/i18n/

And then you include the language using the withLanguage() option method

.withLanguage(language)

demo -> http://plnkr.co/edit/RCrqM3z7qwsUfFwy8HE6?p=preview


I created a .ts file like this:

export class LanguageApp {  public static spanish_datatables = {    processing: "Procesando...",    search: "Buscar:",    lengthMenu: "Mostrar _MENU_ &elementos",    info: "Mostrando desde _START_ al _END_ de _TOTAL_ elementos",    infoEmpty: "Mostrando ningún elemento.",    infoFiltered: "(filtrado _MAX_ elementos total)",    infoPostFix: "",    loadingRecords: "Cargando registros...",    zeroRecords: "No se encontraron registros",    emptyTable: "No hay datos disponibles en la tabla",    paginate: {      first: "Primero",      previous: "Anterior",      next: "Siguiente",      last: "Último"    },    aria: {      sortAscending: ": Activar para ordenar la tabla en orden ascendente",      sortDescending: ": Activar para ordenar la tabla en orden descendente"    }  }}

Then in the component that was loading the DataTable just put that config inside dtOptions:

this.dtOptions = {       language: LanguageApp.spanish_datatables};


In Angular2+ what worked for me is quite the same as mentioned by @davidkonrad, but without the starting letters (s and o), and adding the language as an attribute of the dtOptions. I.e.:

this.dtOptions = {  pagingType: 'full_numbers',  pageLength: 10,  dom: 'Bfrtip',  buttons: [    /*'print',    'csv'*/  ],  responsive: true,  /* below is the relevant part, e.g. translated to spanish */   language: {    processing: "Procesando...",    search: "Buscar:",    lengthMenu: "Mostrar _MENU_ éléments",    info: "Mostrando desde _START_ al _END_ de _TOTAL_ elementos",    infoEmpty: "Mostrando ningún elemento.",    infoFiltered: "(filtrado _MAX_ elementos total)",    infoPostFix: "",    loadingRecords: "Cargando registros...",    zeroRecords: "No se encontraron registros",    emptyTable: "No hay datos disponibles en la tabla",    paginate: {      first: "Primero",      previous: "Anterior",      next: "Siguiente",      last: "Último"    },    aria: {      sortAscending: ": Activar para ordenar la tabla en orden ascendente",      sortDescending: ": Activar para ordenar la tabla en orden descendente"    }  }};