Datatables change interface language
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"
}
}
};
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
};
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