Avoid delay in displaying the Search field

Avoid delay in displaying the Search field

jvc123jvc123 Posts: 11Questions: 3Answers: 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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited July 2022

    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

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0
    edited July 2022

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

            }
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0


    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.

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0

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

            }
        });
    
  • jvc123jvc123 Posts: 11Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

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

    Kevin

  • jvc123jvc123 Posts: 11Questions: 3Answers: 0

    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

Sign In or Register to comment.