Cancel ajax request on draw.dt

thezagday

I have 10 datatables on the page at once, but only one is active. The rest will be available when switching between tabs. Upon loading the main page, I initialize the tables through $('#...').DataTable(), which in turn launches 10 ajax requests to the server at once, which heavily loads it. Is it possible to initialize tables without sending ajax to the server on draw.dt event, and send a request only by click on a specific tab ? Or will I have to load the table only by click on the tab, and accordingly initialize it in the same place?

kthorngren

If you use the ajax option then Datatables will fetch the data on initialization. There isn't an option to delay this. Unless you are using server side processing, ie serverSide: true, then you can use deferLoading to stop the initial request.

Here are some options:

1. Initialize the particular Datatable when that tab is opened.
2. Initialize, on page load, the Datatable that is shown. Then in the background initialize the remaining Datatables. You could use setTimeout to introduce a short delay in loading each of the other tables. Or use the xhr event of the first Datatable to initialize the second Datatable.
3. Init all the Datatables without the ajax option. Then use jQuery ajax to fetch the data for the table of the tab being opened and in the success function use rows.add() to populate the Datatable.

There are probably other ways you can do this depending on your environment.

Kevin

thezagday

Thanks, Kevin! I chose the way to initialize the DataTable separately on each page.