CODEWITHSUNDEEP
jqueryhtmldatatables
sassy_rog
sassy_rog

Reputation: 1097

Show spinner while datataables builds/init dataTable

so I'm using datatables to format a table generated by Coldfusion. So the tables get generated first to html (say it would have been done using PHP to make this easier)

<table id="table" class="table table-bordered" style="width:100%">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>
<script>
    $(document).ready(()=>{
        $("#table").dataTable({scrollY: 500})
    })
</script>

but this table is like 10000 - 15000 records and datatables takes a bit of time before it eventually formats it. I have an overlay loader/spinner in the page. Now how do i show the spinner and hide it when datatables is done creating/formatting the table? I tried a bunch of datatables' callbacks like initComplete callback like this

$(".load-overlay").show()
$('#table').dataTable({scrollY: 500,
    "initComplete": function(settings, json) {
        $(".load-overlay").hide();
      }
});

but this did not work since the spinner showed briefly and was hidden before dataTables built the DataTable.

Upvotes: 0

Views: 3884

Answers (1)

Steven
Steven

Reputation: 927

The comments above about loading the table via ajax are accurate. It does take DT quite a while to initialize a large table, and making the browser load the whole thing into the DOM before initializing DT on top of it is really slow and not great UX.

You can convert the table to use an ajax data source, which is faster than directly loading it as you are. This will load the entire dataset as a JSON blob in the background, and only render the number of rows selected by the user. This works fine until you get to really large datasets, and loading the massive JSON blob becomes its own performance hit. At that point, you want to look at server side processing. It's more challenging to implement, because you must handle all of the searching (as well as sorting) as part of your data query, but it allows you to only load 10/25/50 records at a time, which makes it much faster. With either of these options, DataTables will display its own "loading" message.

Now, suppose you're working with a small enough dataset, or for some reason you really need to load the entire table at once. This is what I've done to make it hide the table until it's ready:

First, hide the datatable by default, and show a spinner in its place:

<table id="datatable" style="display:none">...</table>
<div id="dt_loader" class="spinner"></div>

Then, in your JS, once you've called DataTable(), hide the spinner and show the table:

$('#dataTable').DataTable(options);
$('div#dt_loader').hide();
$('#dataTable').show();

Upvotes: 3

Related Questions