How do I prevent an ajax request from being sent to the server during DataTables Initialization

gfong007

Currently I have the following code:

  var table = $('#ip_dashboard_table').DataTable({
            "ajax": {
                "url"  : "./ip_dashboard_table.cgi",
                "type" : "POST",
                "data" : function ( d ) {
                            return $.extend( {}, d, {
                                "ip_dashboard_data": 1
                            } );
                        },
            "serverSide"   : true,
            "processing"   : true,
            "deferLoading" : 2328
            "order"        : [   
                                   [0 , "asc"],  
                                   [1, "asc"],
                                   [2, "asc"]
                           ],
            ....
            }

What I want to achieve is that, I want DataTables to be initialized, however there should be no data on initial load. I only want the ajax request to be sent to the server once I have clicked a button, and then load the data returned from the server into DataTables.
Any filtering, sorting or paging (applied on the empty data set, if any) should also be done server sided.

How I currently want to achieve this :
1. Initialize data tables with default sorting, and columns
2. Stop the ajax request from being sent to server.
3. End User will click a button to send the ajax request, and the data returned from the server will be loaded into DataTables.

However, I am having difficulty from stopping the ajax request from being sent. deferLoading() is not working either; probably because I have I have a default sorting order defined during initialization, and due to the fact that column index 2 has an initial search filter also.

I thank you in advance for any help.

allan

The deferLoading option that you are using should cause there to be no Ajax until DataTables needs to do a second draw.

If that isn't working for you, can you link to a page showing the issue please.

Allan

gfong007

Hi Allan,

Ohh, I see now. I understand now why deferLoading is not working. It is because I am adding search fields above each column and then hiding certain columns (based on its class), where I later call the function:

table.columns.adjust().draw();

which executes the second draw which makes deferLoading useless for my case.

Is there any alternative solution to stop the ajax request from being sent until some event(for example, the clicking of a button), or to specify until which draw, there will be no ajax request sent using the deferLoading option?

allan

Hi,

I think the only option (other than to not redraw the table) is to use preDrawCallback. With that you can have it return false; to stop the DataTable from drawing. So you could have a little flag:

var readyForDraw = false;

...

table.columns.adjust().draw();
readyForDraw = true;

...

preDrawCallback: function () {
  return readyForDraw;
}

hopefully that makes sense - there are three code chunks above. I think that might do what you are looking for - although it won't execute the post draw callbacks after the column sizing has been applied - so it is possible the table might not render quite correctly there.

Regards,
Allan

gfong007

Hi Allan,

I got this to work for me. Thanks for the help! :)

allan

Excellent - thanks for letting me know.

Regards,
Allan