How to fix data table data is being updated or destroy table?

Question

I am trying to create a data table with my dataset and I want to reinitialize the same table for the new data. But it's getting appended to the same table rather than re-initialising it. This is my code

  function showTab(name,data){
    trheader = "";
    trvalues = "";
    trcontent = "";
    trfoot = "";
    table_id = "";
    trheader += "<thead>";
    for (i = 0; i < data[0].length; i++){
      trheader += "<th>" + data[0][i]+ "</th>";
    }
    trheader += "</thead>";
    if(data[1].length > 0){
      for (i = 0; i < data[1].length; i++){
        trvalues += "<tbody>"
        trvalues += "<tr>"
        trvalues += "<td class='center'>" + (i + 1) + "</td>";
        trvalues += "<td class='center'>" + data[1][i][0] + "</td>";
        for (j = 0; j < 4; j++ ){
          trvalues += "<td class='center'>" + data[1][i][1][j].toLocaleString() + "</td>";
        }
        for(j = 4; j < 7; j++){
          var patt = /^-/;
          var color = data[1][i][1][j].toString();
          if (color.match(patt)){
            trvalues += "<td class='center redCell'>" + data[1][i][1][j].toFixed(2) + '%'+ "</td>";
          }
          else if(color == '0'){
            trvalues += "<td></td>"
          }
          else{
            trvalues += "<td class='center greenCell'>" + data[1][i][1][j].toFixed(2) + '%' + "</td>";
          }
        }
        trvalues += "</tr>"
        trvalues += "</tbody>"
      }
    }
    if (data[2].length > 0)
    {
      trfoot += "<tfoot>"
      trfoot += "<tr>"
      trfoot += "<td></td>"
      trfoot += "<td>Total</td>"
      for (i = 0; i < 4; i++){
        trfoot += "<td class='center'>" + data[2][i].toLocaleString() + "</td>";
      }
      for( i = 4; i < 7; i ++){
        var patt = /^-/;
        var color = data[2][i].toString();
        if (color.match(patt)){
          trfoot += "<td class='center redCell'>" + data[2][i].toFixed(2) + '%'+ "</td>";
        }
        else if(color == '0'){
          trfoot += "<td></td>"
        }
        else{
          trfoot += "<td class='center greenCell'>" + data[2][i].toFixed(2) + '%' + "</td>";
        }
      }
      trfoot += "</tr>"
      trfoot += "</tfoot>"
    }
    trcontent = trheader + trvalues + trfoot;
    table = "#"+name;
    $(table).html(trcontent);
    $(table).DataTable({
      "scrollY":        "400px",
      "scrollCollapse": true,
      "paging":         false,
      "searching": false,
      "destroy": true
    });
    // new addition code
    var seen = {};
    $('table tr').each(function() {
    var txt = $(this).text();
    if (seen[txt])
    $(this).remove();
    else
    seen[txt] = true;
    });

If I use $(table).html it will only load the last value that is trfooter. I have tried setting bDestroy for the table but nothing helps. Please help. Thanks.

This is my table skeleton

<table border = "1px"cellpadding="0" cellspacing="1" width="100%" id= <%= table&.table_name %> style="background: none repeat scroll 0% 0%;font-size:12px;">
</table>

Answer 1

You can destroy and re-declare your datatable to load the latest content

// First Declaration
var table = $('#myTable').DataTable(); 

$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        // Destroy
        table.destroy();
        $('#myTable').empty(); // empty in case the columns change

        // ReDraw 
        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
} );

For more reference : https://datatables.net/reference/api/destroy()