Datatables change interface language

Question

I am currently using angular-datatables.

How can I see the interface of the table in other languages?

I mean the "Show entries", "Search:", "Showing 1 to 10 of 20 entries" literals fore example in Spanish.

Ganges

Answer 1

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

Libation

Answer 2

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
};

Aglow

Answer 3

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"
    }
  }
};

Interim