Load AJAX data to Datatable programmatically

Question

So I have a page where when it first loads, the Datatable should be empty. But when user clicks search, the Datatable will load data using a JSON source.

On initialization, I try to send a "zero" parameter to my controller, which will then return empty data.

siInfoTable = $('#siInfoTable').DataTable({
    "ajax":{
            "url":"http://localhost:9000/milestone/api/si_info/all",
            "data": function(d){
                    d.zero=true;
            }
  })

Then when user clicks search, I try something like this, but it doesn't work.

siInfoTable.ajax({
        "data": function(d){
            //New parameters here
        }
    });

I tried other ways too, but I can only configure the AJAX of datatable once. I thought of just running a query asking for 0 rows using pageLength, but that doesn't seem too ideal.

Any idea?

This looks like it might work: https://stackoverflow.com/questions/31175340/disable-initial-automatic-ajax-call-datatable-server-side-paging — annoyingmouse, Oct 02 '17 at 08:14
Or even this: https://datatables.net/reference/option/deferLoading — annoyingmouse, Oct 02 '17 at 08:16

score 1 · Answer 1 · answered Oct 04 '17 at 05:22

As per comment of @annoyingmouse, deferLoading would be the way for server-side processing datatables. But for my case, I am not going to use server-side processing for some reason. This is what I did instead:

var zero = true;     
siInfoTable = $('#siInfoTable').DataTable({
                    "ajax":{
                        "url": url+"/api/si_info/all",
                        "data": function(d){
                            d.zero= zero;
                        }
                    }
                });

My problem with my original code is that I can only initialize datatable's AJAX once. So, as a solution, I set a zero boolean variable instead of the actual true value for the d.zero parameter that I will send to server-side. Hence, if I need to send a false zero parameter to the server, I just change my variable's value before running the AJAX reload:

zero = false;
$("#siInfoTable").ajax.reload();

For the server code, I just check if zero is true. If it is, then return empty data. Otherwise, return the requested data.

Load AJAX data to Datatable programmatically

1 Answers1