What's the best way to Hide the Table data while jQuery DataTable is being initialized in MVC 4 Scripts Section

Question

I would like to know if anyone has the best way to hide all the data that is going to be displayed inside a jQuery DataTable. For Instance when the page is loaded - a "data loading" text is displayed or it's blank until the Jquery DataTable is initialized and then all data is displayed inside the DataTable.

I am using MVC4 so I am making use of the Scripts Section on the bottom of my screen. If anyone has any idea's or something that worked for you...

Thank you!

Solution 1

You can do this by hiding the table with style (display:none) and then showing it again after the datatable has finished loading. There's an example in this question: jQuery DataTables - Slow initiation, "Normal" html table shown in the beginning

Solution 2

Just putting my solution here for fellow lost souls,

What I did (with the help of my brother who laughed at my attempt to write jQuery!)

was to wait for the initialise to be completed as described here :https://datatables.net/reference/option/initComplete

I added a display:none to my table's style.

<table id="your-table-id" style="display:none">...</table>

---

then expose it once the init has completed.

<script>
$('<h2 class="loading text-center">Loading...</h2>').appendTo('body');
  $(document).ready(function () {
    $('#your-table-id').DataTable({
        "initComplete": function( settings, json ) {
            $('h2.loading').remove();
            $(this).show()
        },
    });
});
</script>