I'm using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and after all script done, the table will then become DataTable. I don't think this kind of appearance is acceptable, so I hope can get some advices here. whether I can make the scripts faster, or don't display the plain table ahead? Btw, I am calling my script from a _Scripts partial view at my _Layout.cshtml head tag
@Html.Partial("_Scripts")
(UPDATE) I tried to hide the table, and show it after the datatable initialize, however, I get a datatable without the table header. Any idea why this is happening?
$('#stocktable').hide(); // Initialize data table var myTable = $('#stocktable').dataTable({ // Try styling "sScrollX": "100%", "sScrollXInner": "100%", "bScrollCollapse": true, // To use themeroller theme "bJQueryUI": true, // To use TableTool plugin "sDom": 'T<"clear">lfrtip', // Allow single row to be selected "oTableTools": { "sRowSelect": "single" }, "fnInitComplete": function () { $('#stocktable').show(); }
isDataTable() method provides the ability to check if a table node is already a DataTable or not. It can be accessed at any time, even before any DataTable has been created on the page. isDataTable() is a function of $. fn.
I did a very simple solution that works fine. In the DataTable initialization I used the method show():
$(document).ready(function() { $('#example').dataTable({ "order": [[ 0, 'asc' ]] }); $('#example').show(); } );
... and in the HTML table I put the style display:none:
<table id="example" class="display" cellspacing="0" width="100%" style="display:none">
Good luck!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With