Datatable drawing all rows before fetching completely from database
Datatable drawing all rows before fetching completely from database
elenora
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
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
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.
Using the button is just for demonstration purposes. As I mentioned use
initCompleteto show the hidden table. I update the example to show this:http://live.datatables.net/nopifamu/3/edit
Kevin
This is not a proper solution, its still scroll y
@muako You can add
scrollY:http://live.datatables.net/nopifamu/16/edit
If you still have a question or issue please provide more details in your thread.
Kevin
This does not help. Still fired as showing all rows then paginate.
@muako Did you read my update in your thread?
Kevin
Yes, read but nothing help from there, however i have solved the issue with jquery window method.