如何清空并重新填充jquery数据表？

Question

我的页面上有一个jQuery数据表。这个数据表是基于我的API

我已经是像下面这样的HTML提出的要求会的数据显示：

<table id="details" class="table table-bordered table-hover table-striped nowrap hidden display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Patient Full Name</th> 
      <th class="hidden">LF</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Patient Full Name</th> 
      <th class="hidden">LF</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr id="dummytr2"><td style="text-align:center;padding-top:20px;" colspan="7"><p><em>No Data Available</em></p></td></tr> 
     </tbody> 
</table> 

第一<th>是会被用来折叠tr和获得设施（第三个<th>或隐藏的）。

我在表中有一个虚拟<tr>，因为我不想在开始时初始化数据表，所以我没有收到错误消息，告诉我无法初始化我的数据表两次。

我的API请求会被通过类似下面的一堆按钮触发：

$.ajax({ 
      url: "https://" + window.myLocalVar + "/api/metrics/GetDetails?metricName=" + metric, 
      type: "GET", 
      dataType: 'json', 
      contentType: 'application/json', 
      success: function (requests) { 

       if (requests.length > 0) { 
        $("#dummytr2").remove(); 
        for (var i = 0; i < requests.length; i++) { 
         var patient_name = requests[i].PatientFullName; 
         var lab_facility = requests[i].LabFacility; 

         tr = '<tr>\ 
            <td class=" details-control"></td>\ 
            <td>' + patient_name + '</td>\         
            <td class="hidden">' + lab_facility + '</td>\ 
           </tr>'; 

           $("#details > tbody").append(tr); 



           //click event for each tr 
           $('#details tbody').on('click', 'td.details-control', function() { 
            var tr = $(this).closest('tr'); 
            var row = table.row(tr); 

            if (row.child.isShown()) { 
             // This row is already open - close it 
             row.child.hide(); 
             tr.removeClass('shown'); 
            } else { 
             // Open this row 
             row.child(format(row.data())).show(); 
             tr.addClass('shown'); 
            } 
           }); 
         } 
        } 
       // NOT SURE WHY IT IS NOT WORKING  
       $('#details').dataTable().fnDestroy(); 

       var table = $('#details').DataTable({ 
        "scrollX": true, 
        stateSave: true, 
        "columns": [ 
         { 
          "className": 'details-control', 
          "orderable": false, 
          "data": null, 
          "defaultContent": '' 
         }, 
         { "data": "PatientFullName" }, 
         { "data": "LabFacility" } 
         ], 
        "order": [[1, 'asc']] 
       }); 
      }, 
      error: function (err) { 
       if (err) { 
        console.log(err); 
       } 
      } 
     }); 
    }); 

function format(d) { 
    // `d` is the original data object for the row 
    var lf = d.LabFacility; 
    if (lf == "") { 
     lf = "No Lab Facility" 
    } 
    // wrapping text is not working??? 
    return '<div class="table-responsive"><table class="table display" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + 
     '<tr>' + 
      '<td>Lab Facility:</td>' + 
      '<td>' + lf + '</td>' + 
     '</tr>' + 
    '</table></div>'; 
} 

这AJAX请求会得到每一个按钮被点击时调用。这意味着每次单击按钮时，我的数据表的内容都会更改。我试图清除并重新填写它没有工作..我试图摧毁它..它没有工作..每次我销毁我的数据表并执行脚本它不会改变表的内容。

我不确定我的代码有什么问题。我的代码仅在第一次运行..第二次单击按钮时，它不会更新我的数据表。

谢谢！

Answer 1

您需要：

• 空与empty()
• 表中删除$('#details').dataTable().fnDestroy();
• 添加destroy: true选项

例如：

if (requests.length > 0) { 

    // Empty table   
    $('#details').empty(); 

    // ... skipped ... 

    var table = $('#details').DataTable({ 
     destroy: true, 
     // ... skipped ... 
    }); 

    // ... skipped ... 
} 

Answer 2

请看看我在评论上述说法的样本：

var dataTable_ = null; 
 
var init_ = false; 
 

 
var initDataTable = function() { 
 

 
    dataTable_ = $('#table').DataTable({ 
 
    preDrawCallback: function(settings) { 
 

 
    }, 
 
    drawCallback: function(settings) { 
 
     if (init_ === false) { 
 
     init_ = true; 
 
     } 
 
    }, 
 
    searching: true, 
 
    data: [], 
 
    fnCreatedRow: function(nRow, aData, iDataIndex) { 
 

 
    }, 
 
    scrollY: true, 
 
    scrollX: true, 
 
    responsive: false, 
 
    serverSide: false, 
 
    autoWidth: false, 
 
    processing: false, 
 
    scrollCollapse: false, 
 
    lengthChange: false, 
 
    fixedColumns: false, 
 
    info: false, 
 
    select: { 
 
     info: false, 
 
     items: 'rows' 
 
    }, 
 
    dom: '<"toolbar">Bfrtip', 
 
    orderMulti: false, 
 
    stripeClasses: ['dt-stripe-1', 'dt-stripe-2'], 
 
    columns: [{ 
 
     name: 'test1', 
 
     data: 'test1', 
 
     title: 'Test1', 
 
     type: 'string', 
 
     orderable: true 
 
     }, 
 
     { 
 
     name: 'test2', 
 
     data: 'test2', 
 
     title: 'Test2', 
 
     type: 'string', 
 
     orderable: true 
 
     }, 
 
    ] 
 
    }); 
 

 
}; 
 

 
var ajaxFunction = function() { 
 

 
    $.ajax({ 
 
    url: "https://api.myjson.com/bins/7ed89", 
 
    type: "GET", 
 
    dataType: 'json', 
 
    contentType: 'application/json', 
 
    success: function(data) { 
 
     if (init_ === false) { 
 
     initDataTable(); 
 
     } 
 
     if (typeof dataTable_ == 'object') { 
 
     dataTable_.rows().remove().draw(); 
 
     dataTable_.rows.add(data); 
 
     dataTable_.draw(); 
 
     } 
 
     //console.log(data); 
 
    } 
 
    }); 
 

 
}; 
 

 

 
$('#button').click(function() { 
 
    ajaxFunction(); 
 
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<table id="table" class="cell-border hover call-list"> 
 
</table> 
 
<button id="button">Click To Load Data</button>