Datatable drawing all rows before fetching completely from database

Datatable drawing all rows before fetching completely from database

elenoraelenora Posts: 23Questions: 10Answers: 0

Hi. I'm implementing asp.net core 3.1 project and I am using Jquery DataTable to show my nearly 2000 records. The data is coming from Entity framework (ToList()) and are sending by model from controller to razor display on Index view.

On an initial page load, all records are fetched (2,000).

This takes a few seconds and in that time, the entire table is drawn with all rows before flicking back to 20 records with pagination.

In this time, the CSS is not loaded for my menu so the site visual is thrown off.
For the solution, after searching on the net, I found that I should use some attribute like deferRender and serverSide and also I should send data from the controller to view by using ajax while I'm sending the data by using model.
Is there any way around this?

Thank you very much in advance.

Replies

  • kthorngrenkthorngren Posts: 12,282Questions: 25Answers: 2,874
    edited January 31

    Sounds like you are populating the DOM with the table. Then once complete initialize Datatables. I would hide the DOM table then show its initialized, maybe in initComplete. This example shows how to hide then show the table on button click:
    http://live.datatables.net/nopifamu/1/edit

    You will want to use columns.adjust() to recalculate the column widths once the Datatable is visible. See this example.

    Kevin

  • elenoraelenora Posts: 23Questions: 10Answers: 0

    Thank you for your reply. The example you provided, is using a button to show the DataTable while I don't want to use a button, instead I want after choosing the webpage, the DataTable being displayed completely at once.

  • kthorngrenkthorngren Posts: 12,282Questions: 25Answers: 2,874

    Using the button is just for demonstration purposes. As I mentioned use initComplete to show the hidden table. I update the example to show this:
    http://live.datatables.net/nopifamu/3/edit

    Kevin

Sign In or Register to comment.