How to change the search language option dynamically

leninad69

I've been trying without success to change the search language option of an already initialized/drawn datatable object ... as far as I understood it should be possible .. but I only get errors (not a function, undefined, uncaught,..).. any suggestion?

Tester2017

I do not know if there is a standard function for it, as I could not find one.

But you might try it the jQuery way, like this:

$('#YOUR-TABLE-NAME_filter > label').html('<label>YOUR-LABEL-TEXT<input type="search" class="form-control input-sm" placeholder="" aria-controls="YOUR-TABLE-NAME"></label>');

I do not know if this a good way to do, as you are changing the settings of an already initialized table and that last is not recommended.

leninad69

Thank you Tester2017 ... your solution works great !!

leninad69

Unfortunately if you use it, the search box does not work any more... you are right .. it is not a good idea to change settings of an initialized table ...

rduncecb

This is because the input is being replaced, along with it's event handers.
You could do something like this instead:

var input = $("#YOUR_TABLE_filter > label > input").detach();
$("#YOUR_TABLE_filter > label").html("New Search Label: ").append(input);

and turn it into a function if you want:

function changeSearchLabel(table, newLabel) {
    var input = $(table + "_filter > label > input").detach();
    $(table + "_filter > label").html(newLabel).append(input);
}

and call it with changeSearchLabel("#YOUR_TABLE", "New Label Text");

leninad69

Thanks rduncecb ... it works without any problem!

GrantKruger

Alternatively to change the search label, per [this page] (https://datatables.net/manual/i18n "this page"), you can do this when initializing your table:

$('#example').DataTable( {
    language: {
        search: "New search text:"
    }
} );

I use it to set the label to "" and instead put placeholder text into the search field.

Yllandra

Hi all,
after fight against the code for a while I have figured out a workaround until Allan implements something in the API to change settings language after initialization without have to destroy the table.
My table initialization is like:

    table = $('#table').DataTable( {
       ...
      language:{
           url: "language/DataTables/en.json"
       },
       ...
    });

As you see I load my language texts from a file by default in English. When the user change application's language I execute a javascript method to change whole texts in the application being the desired language the value of the selectedLanguage variable. Inside that method I use:

fetch("language/DataTables/" + selectedLanguage + ".json")
    .then(function(response) {
        return response.json();
    })
    .then(function(languangeJson) { 
        var oLanguage = $.fn.dataTable.settings[0].oLanguage;
        for (var field in languangeJson) {
            oLanguage[field] = languangeJson[field];
        }
        table.draw();
     });

Works like a charm and change all the texts within the table.

jonalxh

Hi @Yllandra .
I've tried to replicate your second block of code to change the language dynamically but it does not work for me. Are you sure just passing table.draw() is enought to change the lang? I think I should pass an argument with the oLanguage var to the table instance.
I'm using 1.10.16 version.
Thanks.

colin

Hi @jonalxh ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin