Avoid delay in displaying the Search field
Avoid delay in displaying the Search field
jvc123
Posts: 12Questions: 4Answers: 0
I have a table of 900 rows which I am using the DataTables code below within document.ready. The table loads then a brief delay and the Search appears. If I take the code out of document.ready the delay is less but I am not sure if it is OK to do that.
Please could someone advise on the best way to avoid the slight delay. Here is a link to a video that shows the issue https://www.youtube.com/shorts/x4gmqD7DQmI
$('#playerTable').DataTable({
"dom": 'fl<"customToolbarItems">ti',
lengthMenu: [[-1, 10, 20, 50, 100], ["All",10, 20, 50, 100]],
});
Answers
One option is to hide the DOM table until Datatables has initialized then show the table. See my first answer in this thread for an idea of how to do this.
Also see this FAQ for options to maybe increase the rendering speed.
Kevin
Thankyou I will look at the options you have mentioned.
Also placing the $('#playerTable').DataTable.... code outside of document.ready makes the delay shorter and doesn't seem to have any adverse effects is it OK to do that ?
If it works I guess its ok. You just need to make sure the DOM table is populated before initializing Datatables or Datatables won't know about the data and it will think there are no rows in the table.
Kevin
Thank you for you comment about the DOM being ready. I have altered my code (see below) to use the Bootstrap onPostBody event outside of document.ready which is called once the table is successfully loaded and makes the table render more quickly than having it inside of document.ready.
The Search, page length and customToolbarItems all work however now the column header formatting is not correct and sorting doesn't work is there a way to fix this ?
$('#playerTable').bootstrapTable({
onPostBody: function () {
$('#playerTable').DataTable({
"dom": 'fl<"customToolbarItems">ti',
lengthMenu: [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],
});
$('div.customToolbarItems').html('<a href="/xxx/xxx"><span class="fa-solid fa-person-circle-plus fa-lg mt-3 ml-3 mr-3" data-toggle="tooltip" title="Add new person"></span></a><a href="/xxx/xxx"><span class="fa-solid fa-upload fa-lg" data-toggle="tooltip" title="Load players from file"></span></a>');
Does that mean its out of alignment with the columns? If so it sounds like you are initializing Datatbles while its hidden. If this is the case you will need to use
columns.adjust()when the table is shown to have Datatables recalculate the column widths. See this example.Please provide more details of what is not working.
Kevin
I have attached an image showing the issue.
Sorting doesn't work in that when I click on the column header sort icons nothing happens
I have tried putting $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust(); in document.ready when the table is populated but this doesn't help.
Going to need a test case showing the issue to be able to help you resolve this one please.
Allan
Just figuring out the best way to put a test case together. I have however noticed that with the datatatables dom code within document.ready and the event below (with no code inside it) before document.ready causes the issue
I will get back to you with a test case.
$('#playerTable').bootstrapTable({
onPostBody: function () {
Hi Allan,
I have uploaded 2 testcases which will hopefully help. The end result is to try and make the datatables call outside of document.ready and just after the tables has loaded:
http://stationit.com/working.htm
http://stationit.com/BrokenNotSorting.htm
Appreciate your help let me know if you need anything else
John
In your second example you are trying to use both Datatables and bootstrap-table to display the table. They are both competing to format and have table controls. Sorting might be working since both have click events applied for sorting. It would be like clicking the sort button twice.
Why are you trying to use two different libraries for your table? Choose just one.
Kevin
Thanks I understand what's causing the issue now.
I'm trying to find a way to call DataTables immediately after the table has finished loading data rather than calling DataTables in document.ready (see first example) where there is a delay in showing the search box etc when the table is large
I am not sure of the best way to do this are you able to point me in the right direction
John
One option is to hide the table then after Datatables initializes you can display it. See this thread for an example.
Kevin
Thank you yes that would work however I have just noticed the Ajax option which I think will help the performance issue so am going to look at that first