rendering problem during page refresh

Samantha1999

hello everybody, I am not very experienced, single mom here learning new stuff, can somebody help me?

Link to test case: https://imgur.com/a/HAQHtvM
Debugger code (debug.datatables.net): code is a bit long because there are a lot of options:

              ```optionsTable = {
        data: temp,
        stateSave: true,
        columns: [
            {
                data: 'time2',
                visible: false
            },
            {
                data: 'distanza_in_km',
                visible: false
            },
            {
                data: 'esperienza_richiesta',
                visible: false
            },
            {
                data: 'salario_offerto',
                visible: false
            },
            {
                data: 'data_inserimento',
                visible: false
            },
            {
                data: 'attivita',
                visible: false
            },
            {
                data: 'nascosto_employer',
                visible: false
            },
            {
                data: 'candidatura_preferita',
                visible: false
            },
        ],
        searchPanes: {
            initCollapsed: true,
            viewTotal: true,
            layout: 'columns-1',
            clear: false,
            orderable: false,
            dtOpts: {
                searching: false
            },
            filterChanged: function(count) {
                console.log("filter modified");
                $("div.dtsp-narrow").css("flex-direction", "row !important");
            }
        },


        columnDefs: [{
                searchPanes: {
                    options: [
                            //.....
                    ]
                },

                targets: [...]
            },
            {
                searchPanes: {
                    show: true,
                },
                targets: [1, 2, 3, 4, 6, 7, 8]
            },
            {
                searchPanes: {
                    show: false,
                },
                targets: [0]
            },

        ],

        language: {
            url: languageUrl,
        },
        dom: 'Plfrtip',

        initComplete: function() {
            $(".dtsp-panesContainer").first().prependTo("#filtra");
            $(".dtsp-titleRow").css("display", "none");
        }
    }
    $(document).ready(function() {
        $('#jobslist').DataTable(optionsTable);
    });```

I omitted all the render functions otherwise the code was to long (sorry for my awful English I am Italian)

Error messages shown: no error message
Description of problem: when I refresh the page the table visualisation get messed up for a second and then it's normal again
You can see in the images here: https://imgur.com/a/HAQHtvM

Maybe there is a way to avoid this from happening or a workaround

rf1234

For complex tables I used to have that problem, too. Messed up elements and half-baked tables popped up and it took a short while until things worked out.

I just don't show the page before all ajax calls have been completed plus a timeout of 300ms. I do that for all of my dozens of pages.

on page load I do this:
- hide the entire page content.
- start a spinner (busyLoad in my case)
- do a couple of things, and
- fade in the content on ajaxStop ("one" ajaxStop, to be precise)

$('#content').css("display", "none");
$.busyLoadSetup({ fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" });
$.busyLoadFull("show");
$(document).one('ajaxStop', function () {
    setTimeout(function(){  
        $.busyLoadFull("hide");
        $('#content').fadeIn('fast').promise().done(function() {
            //"api: true" - means it is a data table
            $.fn.dataTable
                .tables( { visible: true, api: true } )
                .columns.adjust()
                .responsive.recalc();
        });
    }, 300);        
});   

Try deepl.com for translation. Excellent for longer texts and much more accurate than Google in my opinion. I used to have a colleague from Argentina. She would type all of her emails into deepl.com and copy the German result into her email client. Nobody noticed that she couldn't write German, only speak it
https://www.deepl.com/translator

Samantha1999

Thank you rf1234 for your answer. you are so kind
So based on what you suggest and adapting it to my case, I simply need to hide the table until the first Ajax stop event occurs after the table draw. Is this correct?

I would like to hide only the table and not the whole page because in the table rows there are buttons that modify mysql tables, it would be a problem for usability to hide the page every time