DT not scrollable when using 'language' parameter (internationalization plug-in)

Learco

Hi everyone,

So on my site I have an 'array button' that displays a scrollable datatable on click (which also has pagination).
It worked perfecly fine until I recently tried to implement translations with the internationalisation plug-ins.

Problem is, if I use 'language' with 'url' parameter at the DT initialisation, the datatable is not scrollable anymore.
Does someone have any idea why ?

Here is the code :

var table = $('#' + dataTable_id).DataTable({
            initComplete: function () {
                $('.dataTables_scrollHead > .dataTables_scrollHeadInner > table > thead > tr > th > div').each(function(){
                    if(this.className.includes('searchableInput')){
                        addPopover(this, 'input');
                    }
                    else if(this.className.includes('searchableRadioGroup')){
                        addPopover(this, 'radiogroup');
                    }
                })          

            },
            "columnDefs": [
                { "orderable": false, "targets": 0 }
            ],
            "order": [[4, 'desc']],
            "pageLength": 25,
            "scrollY": getArrayBodySize(),
            "scrollCollapse": true,
            "dom": 'lrtip',
            "paging": true,
            "autoWidth" : true,
            "columnDefs": [
                { "width": "13%", "targets": 1 },
                { "width" : "12%", "targets":7},
                {"width" : "10%", "targets": 10}
            ],
            "language": {
                //"url" : "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
                "url": getDtLanguage()
            }
        })

I tried using a CDN but it still doesn't work.

My function 'getDtLanguage()' function just returns the path to the json file in current session language (I copy pasted needed files from the plug-in page).
I know the path is correct because I can see the translated labels in the datatable.

If I directly define values (like here : https://datatables.net/examples/basic_init/language ) I can scroll, but I need to dynamically load translation files.

Also last thing : the DT is displayed in a modal on the page.

Hope someone can help !

kthorngren

Fetching the language via a URL is an asynchronous process. I wonder if the function call to "scrollY": getArrayBodySize(), works properly because of this? Maybe try a static value as a test.

Do you get errors in the browser's console?

Can you post a link to your page or a test case replicating the issue so we can help debug?

Kevin

Learco

OK you were right, problem is the getArrayBodySize() function, thanks.

If getArrayBodySize just returns a static string, it works fine :

function getArrayBodySize(){
    return '400px';
}

But if it runs more 'complex' code, such as this (my initial function), then it doesn't work :

function getArrayBodySize(){
    if($('.modal-content-ArrayButtons').length && $('.modal-content-ArrayButtons').height() > 0){
        return ($('.modal-content-ArrayButtons').height() - 230 ) + 'px';
    }
    else{
        viewportH = window.innerHeight;
        footerH = $('.cordis-footer').outerHeight(); 
        return (viewportH - footerH - 280) + 'px';
    }
}

I have no error in the browser's console.
Tell me if you still need a replicating issue (I would need to create an element with some height I guess).

So is the $ jquery function async, and at initialisation I cannot not have 2 async functions ?
What would the best solution, use a setTimeout(), change the value of scrollY in the initComplete statement (if it's possible)... ?

kthorngren

Thanks for the complete answer

change the value of scrollY in the initComplete statement (if it's possible)... ?

No, scrollY is only set at initialization time. I don't believe there is a way to change it after like in initComplete.

Some options I can think of:

1. Use static language setting like you suggested works.
2. If you want to use the CDN use a jQuery ajax() to fetch the language file. In the success function to the JSON assign it a variable then init Datatables with that variable.
3. Maybe this Vertical scroll fitting solution will help.

Maybe @allan or @colin have better ideas.

Kevin

colin

If you can create a test case, we'd be happy to take a look. 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

Learco

OK, I finally found the getArrayBodySize() returned a way too big value, which is why scrolling was disabled...

I fixed it and it works now (I actually put "scrollY" parameter to a very small height at instantiation, and then after init is complete I change max-height property of dataTables_scrollBody).

Thank you for your quick answers !

Learco

colin

Excellent, glad to hear you found it,

Colin