Running DataTables' ajax() function when updating table

Question

I have a DataTables where I'm taking additional actions on the AJAX returned data, per the docs, like:

var table = $('#statstable').DataTable( {
    ajax: function (data, callback, settings) {
        $.ajax({
            url: "/api/stats/2020/01/",
        }).then ( function(json) {
            var data = json;
            $("#total_in_month").text(json.total_in_month);
            callback(data);

        });
    },
    search: false,
);

The source I'm using is formatted as such:

{
    "total_in_month": 1636, 
    "data": [
        {"total_on_date": 47, "date": "01-01-2020", "externals": 1}, 
        {"total_on_date": 47, "date": "02-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "03-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "04-01-2020", "externals": 1}, 
        {"total_on_date": 49, "date": "05-01-2020", "externals": 1}, 
        {"total_on_date": 48, "date": "06-01-2020", "externals": 3}, 
        {"total_on_date": 47, "date": "07-01-2020", "externals": 3}, 
        {"total_on_date": 48, "date": "08-01-2020", "externals": 1}, 
        ...
    ]
}

Everything works, i.e. my DataTable is populated properly and the span total_in_month is updated properly when the page is loaded.

However I'd like to dynamically change the data in the table, but also in the span 'total_in_month' outside of the table.

So I was using something like $("#statstable").DataTable().ajax.url("/api/stats/" + year + "/" + month + "/").load();, which works, but that doesn't allow me to update total_in_month.

Any idea how this can be approached?

I tried calling $('#statstable').DataTable( { ajax: function (data, callback, settings) { ... again but that yields an error Cannot reinitialise DataTable.

Depends what you mean by "dynamically change the data" - but maybe all you need is table.ajax.reload();. The reload() call will re-execute the ajax option in your DataTable definition. It will fetch the latest data from the URL and also update the external span. — andrewJames
– andrewJames, Commented Nov 22, 2020 at 22:43
A table.ajax.url() followed by a table.ajax.reload() seems to have the same effect as table.ajax.url().load(). When re-doing the json request, I would like to receive the json data once, and update both the table /and/ the #total_in_month span, like I do with the ajax: function (data, callback, settings) call when initially loading the table. — SaeX
– SaeX, Commented Nov 23, 2020 at 11:37
OK understood - I have provided an approach which combines table.ajax.reload() with the use of a variable for the URL. This avoids needing to use table.ajax.url(). — andrewJames
– andrewJames, Commented Nov 23, 2020 at 13:43

andrewJames · Accepted Answer · 2020-11-23 13:43:08Z

You can use a variable for your URL source, together with table.ajax.reload(), to re-populate both the table and the span each time, from a new URL:

$(document).ready(function() {

  // my test URLs are http://localhost:7000/stats/1 and http://localhost:7000/stats/2
  var base_url = "http://localhost:7000/stats/";
  var full_url = base_url + '1';
 
  var table = $('#statstable').DataTable( {
    ajax: function (data, callback, settings) {
      $.ajax({
        url: full_url,
      }).then ( function(json) {
        var data = json;
        //console.log( json.total_in_month );
        $("#total_in_month").text(json.total_in_month);
        callback(data);
      });
    },

    search: false,
    columns: [
      { data: "total_on_date" },
      { data: "date" },
      { data: "externals" }
    ]
  });

  // a demo of changing the URL and re-displaying the table and span
  // data from the new URL:
  setInterval( function () {
    full_url = base_url + '2';
    table.ajax.reload();
  }, 3000 );

} );

In my case, I have used a simple test URL with only one variable:

var base_url = "http://localhost:7000/stats/";
var full_url = base_url + '1';

You would need to adjust that for your URL, year and month values.

In my example code, just for demonstration purposes, the page is populated from http://localhost:7000/stats/1, and after 3 seconds, the page is automatically updated with data from http://localhost:7000/stats/2. This applies to both the table and span.

Collectives™ on Stack Overflow

Running DataTables' ajax() function when updating table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related