refresh dataTable after table update

Question

I got a html table tabDevis:

<table id="tabDevis" class="invisible stripe">
    <thead>
        <tr>
            <th>numDevis</th>
            <th>libProduit</th>
            <th>codEtat</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

I put some data with ajax call. These data are from a database. With code is inside a function :

function putDevis() {
  var listeDevis = $("#tabDevis").find("tbody");

  var request = $.ajax({
    type : "GET",
    url : "/services/opp/getDevis/",
    cache : false
  });

  request.done(function(msg) {
    for (var i = 0; i < msg.length; i++) {
        var devis = msg[i];
        var tr = $("#template").clone();
        tr.removeAttr("id");
        tr.attr('id', 'devis-' + devis.id);
        tr.find('#numDevis').html(devis.idOpportunite);
        tr.find("#codProduit").html(devis.codProduit);
        tr.find("#libProduit").html(devis.libProduit);

        listeDevis.append(tr);
    }
  }

  request.fail(function(jqXHR, textStatus, errorThrown) {
    // Deal with the error
  }

  // Call dataTable
  $('#tabDevis').DataTable({
    "order" : [ [ 1, "desc" ] ],
    "oLanguage" : {
         ...
    }
    "aoColumns" : [ {
            "bSortable" : true
        }, {
            "bSortable" : true
        }, {
            "bSortable" : true
    }]
  }
}

I delete a row in my database from another way, so I want to reload the html table. I call my putDevis() function, but I still get the deleted row who is deleted from the database.

This delete action is done with another javasript function :

function deleteDevis(numDevis){

  var requestsup = $.ajax({type: "GET",
        url: "/services/ep/deleteDevis?pId=" + numDevis
        cache: false
  });

  requestsup.done(function(msg){
    putDevis();
  });

  requestsup.fail(function(jqXHR, textStatus, errorThrown) {
    // Deal with errors
  });
}

What is the way to refresh the dataTable ?

I've tried to call $('#tabDevis').dataTable().fnDestroy(); just before my putDevis()` call but it doesn't work.

EDIT ABOUT SOLUTION

The way is to destroy dataTable just there :

var table = $('#tabDevis').DataTable(); 
table.destroy();
var listeDevis = $("#tabDevis").find("tbody");

And then draw it after the dataTable call :

var table = $('#tabDevis').DataTable(); 
table.draw();

$('#tabDevisClient') isn't this use different element ID than the one you used to initialize the data table $('#tabDevis') ? Does the element with #tabDevisClient ID exist on your HTML page? — Biruk Abebe

Sagar Sagar · Accepted Answer · 2016-04-21T10:12:17

You Can use some thing like this:

var refreshinterval = 30000;
setInterval(putDevis, refreshinterval);

refresh dataTable after table update

2 Answers