DataTable get data on button click

Question

I am using jQuery DataTables plugin with server side processing in my application. As of now, the table is initialized and loaded with data when the document is ready. The code goes as follows:

jQuery(document).ready(function() {
    var table = DataTables.create("#projectTable", parameters, {
                    ajax: {
                        url: 'project/search.do',
                        data: function(d) {
                                d.numberOfColumns = 6
                                d.submittedOnStart = jQuery("#date1").val(),
                                d.submittedOnEnd = jQuery("#date2").val()                           
                        },
                        dataSrc: "rows",
                        type: 'GET'
                    },
                    columns: getColumns(),
                    "columnDefs": getColumnDefs()
                });
});

This is working fine. But, I want to change it in such a way that the table is initialized on document ready, but the data is loaded on button click. I looked into Load DataTable data through button Click which is not working in my case. Is there a way to do this?

What's wrong with var table = jQuery("#projectTable").DataTable({ /* init options */ }); inside your doc.ready function? — mhodges
Thanks for the reply Mhodges. Nothing is wrong with that part. That is doing fine. But, how can I load data into the already initialized table on button press? — rav
Ahh, my apologies, I misread your question. I thought you were just asking how to initialize the table on the document ready. I believe .reload() is what you're looking for. datatables.net/reference/api/ajax.reload() — mhodges
If you need to change your ajax data source for any reason, you can use .url() chained with .load() as also mentioned in the docs. datatables.net/reference/api/ajax.url() and datatables.net/reference/api/ajax.url().load() — mhodges

Cesar Bielich Cesar Bielich · Accepted Answer · 2017-02-13T18:04:20

Utilize .url and .load to get the table to refresh with a button click.

jQuery(document).ready(function() {
  var table = DataTables.create("#projectTable", parameters, {
    ajax: {
      url: 'project/search.donot',
      data: function(d) {
        d.numberOfColumns = 6
        d.submittedOnStart = jQuery("#date1").val(),
          d.submittedOnEnd = jQuery("#date2").val()
      },
      dataSrc: "rows",
      type: 'GET'
    },
    columns: getColumns(),
    "columnDefs": getColumnDefs()
  });
  $('#thisbutton').click(function() {
    // you can reload your data here. You can call a different file if you need to change the data returned
    table.ajax.url( "project/search.do" ).load();
  });
});

DataTable get data on button click

1 Answers