javascript - 如何修复数据表数据被更新或者破坏表的情况？

Question

我正在尝试使用我的数据集创建一个数据表，并且我想为新数据重新初始化同一表。但它被附加到同一个表中，而不是重新初始化它。这是我的代码

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

如果我使用 $(table).html 它只会加载最后一个值 trfooter。我尝试为表设置 bDestroy 但没有任何帮助。请帮忙。谢谢。

这是我的 table 骨架

<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

您可以销毁并重新声明您的数据表以加载最新内容

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

更多引用:https://datatables.net/reference/api/destroy()