Table data loads, briefly and unformatted, before jquery DataTables loads.

rimshot609

Table data loads, briefly and unformatted, before jquery DataTables loads. I have researched and found many say the solution is to hide the table with css and then show it in jquery with initComplete. I have tried the following but nothing seems to work:

css:
#tblAccount {
    visibility:hidden;
}
#tblCustomer {
    visibility: hidden;
}

jquery:
$(function () {
    $("[id*=tblAccount], [id *= tblCustomer]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "dom": 'lBfrtip',
        "buttons": ['excel', 'print', 'pdfHtml5'],
        "initComplete": function () {
            $('#tblAccount').show().css({ visibility: "visible" });
        $('#tblCustomer').show().css({ visibility: "visible" });
        }

    });
})

kthorngren

See if this example helps:
http://live.datatables.net/xaqavaxe/1/edit

It uses settimeout to simulate the delay in loading the table and Datatables initialization.

You will likely need to use columns.adjust() to have Datatables recalculate and adjust the columns widths after showing the table.

Kevin

jamiedewitz

Did this problem get solved? I would love to see the solution; I've been stuck trying to figure this out for days.

kthorngren

@jamiedewitz I posted an example. Does that not help? If not then please provide a simple test case showing what you are doing so we can help.

Kevin

jamiedewitz

I used the example, but my datatable still shows up with all of the columns way outside of the table, then it disappears, then re-appears again, but this time it is fully loaded and showing up correctly. I'm using razor to display the form data which is coming from a ViewModel in my C#.NET MVC application.

Before:

After:

        $(document).ready(function () {

            // Hide table
            document.getElementById('directoryDataTable').style.visibility = "hidden";

            // Simulate delay in loading table
            setTimeout(function () {
            // DataTable
                var table = $('#directoryDataTable').DataTable({
                    initComplete: function (settings, json) {
                        // Show table
                        document.getElementById('directoryDataTable').style.visibility = "visible";

                        // Have Datatables adjust is column widths after showing table
                        $('#directoryDataTable').DataTable().columns.adjust();
                    },
                responsive: {
                    details: {
                        renderer: function (api, rowIdx, columns) {
                            var data = $.map(columns, function (col, i) {
                                return col.hidden ?
                                    '' +
                                    '' + col.title + ':' + ' ' +
                                    '' + col.data + '' +
                                    '' :
                                    '';
                            }).join('');

                            return data ?
                                $('').append(data) :
                                false;
                        }
                    },
                },
                order: [], //  override the default setting of "order": [[ 0, 'asc' ]] because we wouldn't sort the list by photos
                columnDefs: [
                    { targets: 'no-sort', orderable: false } // make sure we cannot sort any column with the class no-sort                        
                ]
                });
            }, 3000);
        });
    

kthorngren

This will be difficult to diagnose without actually seeing it. Can you post a link to your page?

datatable still shows up with all of the columns way outside of the table

Is the Datatable initially hidden when it is initialized?

If yes, then you will want to use responsive.recalc() along with columns.adjust() when you make the table visible.

If no, then there is a styling issue that is causing the Datatable to be outside the container you want it in. Impossible to say without seeing your page.

then it disappears, then re-appears again, but this time it is fully loaded and showing up correctly

You are using settimeout which was in my example just to simulate the delay in loading the table. You don't want to use this in production. Without seeing your page or a test case to see the flow of your script it would be hard to say what the problem is.

Kevin

jamiedewitz

Ok I will try to get it working on jsfiddle.net. My application is internal only, so I can't post a link to it.

jamiedewitz

I'm not sure that fiddle is the right place for this because it is a giant amount of data, but I didn't really know where else to go. But it does work the same way as my internal application. https://jsfiddle.net/jamiedewitz/spfx8tLz/3/

jamiedewitz

The css and script bundles I included in the layout are:

       bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.min.css",
                "~/Content/Site.min.css",
                "~/Content/jquery-ui.min.css",
                "~/Content/jquery-ui.structure.min.css",
                "~/Content/DataTables/css/dataTables.bootstrap4.min.css",
                "~/Content/DataTables/css/responsive.bootstrap4.min.css"));

        bundles.Add(new ScriptBundle("~/Scripts/js").Include(
                "~/Scripts/jquery-3.3.1.min.js",
                "~/Scripts/jquery.validate.min.js",
                "~/Scripts/jquery-ui.min.js",
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/respond.min.js",
                "~/Scripts/DataTables/jquery.dataTables.min.js",
                "~/Scripts/DataTables/dataTables.bootstrap4.min.js",
                "~/Scripts/DataTables/dataTables.responsive.min.js",
                "~/Scripts/DataTables/responsive.bootstrap4.min.js"));```

kthorngren

For some reason the fiddle doesn't seem to load for me. I can open other fiddles. The test case just needs to replicate the script flow. The data doesn't really matter as its not the issue. Maybe you can reduce it done to the bare minimum to replicate the issue.

Kevin

jamiedewitz

Ok, I will update it. Thanks for the help

jamiedewitz

This one is faster, but you can see it blink quickly, which is what it is doing with the table only much slower when there are 1,239 results. In this example there are only 10 results which makes it faster, but still has that initial blink which I would like to get resolved.
https://jsfiddle.net/jamiedewitz/spfx8tLz/5/

jamiedewitz

This is what I get when using the DataTables debugger btw:

Data source: DOM
Processing mode: Client-side
Draws: 1
Columns: 14
Rows - total: 1239
Rows - after search: 1239
Display start: 0
Display length: 10

kthorngren

Its still slow Anyway here are the changes I made:

Added the ID DT-div to the div for the table. And gave it the style="display:none;":

     <div id="DT-div" class="panel-body" style="display:none;">

        <table id="directoryDataTable" class="table table-striped table-bordered display nowrap" style="width:100%">
          <thead>

Then added this code to initComplete. Uses jQuery show() to display the div. Then uses columns.adjust() and responsive.recalc() to recalc the column widths. Datatables can't calc the column widths when its initialized in a hidden element.

   initComplete: function() {
        $('#DT-div').show();
        
        // Have Datatbles adjust is column widths after showing table
        $('#directoryDataTable').DataTable()
            .columns.adjust()
            .responsive.recalc();

    }

Here is the updated fiddle:
https://jsfiddle.net/k9pwb715/

HTH,
Kevin

jamiedewitz

That is amazing Kevin! Thank you so much!