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

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

LearcoLearco Posts: 5Questions: 2Answers: 0

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 !

Answers

  • kthorngrenkthorngren Posts: 14,110Questions: 25Answers: 3,326

    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

  • LearcoLearco Posts: 5Questions: 2Answers: 0

    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)... ?

  • kthorngrenkthorngren Posts: 14,110Questions: 25Answers: 3,326

    Thanks for the complete answer :smile:

    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

  • colincolin Posts: 12,903Questions: 0Answers: 2,200

    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

  • LearcoLearco Posts: 5Questions: 2Answers: 0

    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

  • colincolin Posts: 12,903Questions: 0Answers: 2,200

    Excellent, glad to hear you found it,

    Colin

Sign In or Register to comment.