Refresh DataTable only if data changed

Question

I use DataTables with serverside = true. I want to redraw my datatable only if data on server is changed. But table.ajax.reload() redraw table on every call.

May you provide the small example?

1. Get data from server
2. Check that data is changed
3. Redraw table with new data

UPD based on comments:

I have simple server side processing datatable. If user change page or sort or filter or anything else there ajax query to server to receive new data and redraw table. But data on server may change. Other user insert new row to database table or change something, for example. I want if this happend data in datable refresh automaticly. But it's rare event. No need to redraw all datable every 10 (or some) seconds. Need to redraw only if something on server changed. Query to server is fast. Redrawing is slow.

Answer 1

This is a great question - my DataTables have buttons, inputs, etc. in them. When a redraw happens issues like de-focusing a textbox or a mis-clicked button can happen. To avoid this, I set my DataTables to only redraw if there is new/updated data from the server.

Here's how:

template.html

<!-- include lodash _ used to determine json equality -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

script.js

// global variables that are updated with each new ajax reload call:
var last_response = {};
var redraw = false;

// DataTable init:
var table = $('<selector>').DataTable({
  
  // initial settings:
  "columns" : ["<the columns>"],
  ...      

  // override the dataSrc parameter to handle data upon receiving a new response:
  "ajax" : {
     "url" : "<the url>",
     "dataSrc": function(response) {
 
       // compare response to the last response using lodash:
       if (_.isEqual(last_response, response) redraw = false;
       else redraw = true;

       // set the last_response global variable:
       last_response = response; 

       // return appropriately formatted data:
       return data;
     }
  
  // use the predraw callback to determine whether to draw or not:
  "preDrawCallback" : function() {

    // return true to draw or false to skip draw:
    return redraw;

  }
   
});