Changing the default language on the fly using DTOptionsBuilder

[mrafaqi]

It seems like angular-datatables has worked flawlessly for me and I have used the default language to English. I managed to also change default options but I could not find any example if how to set the language (other than English). As we will be using two language in our project (English+Finnish) so I would like to change those also for datatables labels (Search and page title etc). I can locate in API there is a function to do it as below

DTOptionsBuilder.newOptions().withDisplayLength(10).withPaginationType('full_numbers').withLanguage({<What-should-be-here});

Now as API mentions to use something like this

angular.module('myModule', ['datatables'])
.controller('myCtrl', function ($scope, DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withLanguage({
sUrl: '/path/to/language'
});
});

Which I don't understand. Will URL return a JSON for sURL? does it mean I could simply specify a JSON with translated text inside? If yes, then how (placeholders)? Please give an example for "page" and "showing 10 entries". Your time is highly appreciated.

[mrafaqi]

I tried to do something like this in options controller

vm.dtOptions = DTOptionsBuilder.newOptions().withDisplayLength(10).withPaginationType('full_numbers').withLanguage({ "language" : {"paginate" : { "first": "Ensi" }}});

but it does not do any magic. I saw examples of these on datatables.net. Do they work same way with angular-datatables?

[l-lin]

You can find the list of languages in the DataTable official's documentation.
Basically, you either provide an URL like in API example, or you can provide a JSON like this:

$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withLanguage({
    "sEmptyTable":     "No data available in table",
    "sInfo":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "sInfoEmpty":      "Showing 0 to 0 of 0 entries",
    "sInfoFiltered":   "(filtered from _MAX_ total entries)",
    "sInfoPostFix":    "",
    "sInfoThousands":  ",",
    "sLengthMenu":     "Show _MENU_ entries",
    "sLoadingRecords": "Loading...",
    "sProcessing":     "Processing...",
    "sSearch":         "Search:",
    "sZeroRecords":    "No matching records found",
    "oPaginate": {
        "sFirst":    "First",
        "sLast":     "Last",
        "sNext":     "Next",
        "sPrevious": "Previous"
    },
    "oAria": {
        "sSortAscending":  ": activate to sort column ascending",
        "sSortDescending": ": activate to sort column descending"
    }
});

[mrafaqi]

great! you are very helping guy :)

[l-lin]

👍

[tomerb15]

just in case one of you is listening, i was wondering how can i change the "sSearch" and "sSearchPlaceholder" defaults when using the following lines:

$scope.outerDefaults = {
        sPaginationType: "simple_numbers",
        bRetrieve: true,
        bDestroy: true,
        aaSorting: [[1, "asc"]],
        sDom: 'ftilp',
        withLanguage:{
            sSearch:"search test"
        }
    };

its just a syntax question, all the other definitions works fine accept the sSearch

[l-lin]

Looks like you are not using the DTOptionsBuilder. So that means you have to directly set the attribute language:

$scope.outerDefaults = {
        sPaginationType: "simple_numbers",
        bRetrieve: true,
        bDestroy: true,
        aaSorting: [[1, "asc"]],
        sDom: 'ftilp',
        language: { // not withLanguage wich is from DTOptionsBuilder
            sSearch:"search test"
        }
    };

[tomerb15]

Thanks for the help, i figure it out eventually 👍

[Nullises]

Thanks for help!
¡Gracias por la ayuda!