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, Feb 13 '17 at 17:50
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, Feb 13 '17 at 17:53
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. https://datatables.net/reference/api/ajax.reload() — mhodges, Feb 13 '17 at 17:59
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. https://datatables.net/reference/api/ajax.url() and https://datatables.net/reference/api/ajax.url().load() — mhodges, Feb 13 '17 at 18:02

Cesar Bielich · Answer 1 · 2017-02-13T18:23:35.677

-2

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();
  });
});

edited Feb 13 '17 at 18:23

answered Feb 13 '17 at 18:04

Cesar Bielich

4,754
9
39
81

"...in such a way **that the table is initialized on document ready**, but the **data is loaded on button click**" – mhodges Feb 13 '17 at 18:05
@mhodges - read the comments below his question, he didn't type his question correctly he is asking for the button click `But, how can I load data into the already initialized table on button press?` His title even reflects that `DataTable get data on button click` – Cesar Bielich Feb 13 '17 at 18:06
This is going to initiate the table on each button click. I am looking to initiate the table on page load and just make an ajax call on click and load the table with json response from the ajax call made. – rav Feb 13 '17 at 18:11
ah ok hold please – Cesar Bielich Feb 13 '17 at 18:12
the edit seems good. But, can we initially create a table with no data? That is on page load, we initialize a table with no data in it and then populate the table with data on button click? – rav Feb 13 '17 at 18:21
just call a blank file that returns no results on load and call the `project/search.do` on button click – Cesar Bielich Feb 13 '17 at 18:23

DataTable get data on button click

1 Answers1