Prevent flicker when using language plugin

augustosamame

When I use the language option for my datatables, a noticeable flicker occurs upon rendering the page. I did some research and it appears caused by this:

(from Language.option docs)
Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

Is there any way to prevent this? I only use one language and would be happy to maybe build from source with alternate strings to solve this.

colin

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

kthorngren

One option might be to try loading the language JSON file from a local resource instead of using the CDN url.

Another option is to hide the table until Datatables is initialized. Then, in initComplete make the table visible. Likely you will need to use columns.adjust() after making the table visible.

Kevin

augustosamame

Thanks @kthorngren . Already tried that. The flicker is not caused by a delay in getting the language files. Even if they are locally available, and load is blazingly fast, the sole use of a language option triggers the init to be async due to an "Ajax request". Hence the flicker.

From the docs:

(from Language.option docs)
Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

augustosamame

Hi @colin . Thanks for your answer. However this is more of a conceptual inquiry rather than a specific issue i'm having. The docs state that the use of the language option will make the init async until Ajax request is completed. My question is how to make my language the "default", like english is right now, so that no delay happens when using my language.
In other words, how to convert the library to spanish so that spanish labels will be shown with NO language option in initializer. Hence my question about building from source.

augustosamame

Sort of figured it out. The default english strings are set in /js/model/model.default.js in source repo. There are only 20 strings. I can fork the source repo, modify the default strings to spanish and build from source. That should get rid of the flicker unless I'm using a language option other than spanish.

colin

I'm not seeing the flicker with these examples, here and here. We're happy to take a look, but we would really need to the see the issue to be able to debug,

Colin

allan

My question is how to make my language the "default", like english is right now, so that no delay happens when using my language.

Set the defaults. No need to fork the repo - if you have the strings, just include them in a Javascript file (datatables-plugins.js perhaps?) which loads after DataTables, but before you initialise the tables.

Allan