Avoid delay in displaying the Search field

jvc123

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]],
});

kthorngren

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

jvc123

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 ?

kthorngren

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

jvc123

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>');

        }

kthorngren

however now the column header formatting is not correct

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.

sorting doesn't work

Please provide more details of what is not working.

Kevin

jvc123

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.

allan

Going to need a test case showing the issue to be able to help you resolve this one please.

Allan

jvc123

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 () {

        }
    });

jvc123

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

kthorngren

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

jvc123

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

kthorngren

One option is to hide the table then after Datatables initializes you can display it. See this thread for an example.

Kevin

jvc123

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