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

我的页面上有一个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>

$.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>';
}

病人全名
LF
病人全名
LF
没有可用的数据

第一个

将用于折叠tr并获得该患者的设备（第三个

或隐藏的设备）

我在表中有一个虚拟的

，因为我不想在开始时初始化datatable，所以我没有收到错误消息，告诉我不能两次初始化datatable

对my api的请求将通过以下按钮触发：

<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>

$.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({
url:“https://“+window.myLocalVar+”/api/metrics/GetDetails？metricName=“+metric，
键入：“获取”，
数据类型：“json”，
contentType:'应用程序/json'，
成功：功能（请求）{
如果（requests.length>0）{
$（“#dummytr2”）.remove（）；
对于（var i=0；i正文”）。追加（tr）；
//单击每个tr的事件
$（“#详细信息tbody”）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
});
}  
}
//不知道为什么它不起作用
$（“#详细信息”）.dataTable（）.fnDestroy（）；
变量表=$（“#详细信息”）.DataTable({
“scrollX”：正确，
stateSave：没错，
“栏目”：[
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“数据”：“PatientFullName”}，
{“数据”：“LabFacility”}
],
“订单”：[[1，‘asc']]
});
},
错误：函数（err）{
如果（错误）{
控制台日志（err）；
}
}
});
});
函数格式（d）{
//`d`是该行的原始数据对象
var lf=d.LabFacility；
如果（lf==“”）{
lf=“无实验室设施”
}
//换行文字无效？？？
返回“”+
'' +
“实验室设施：”+
“+lf+”+
'' +
'';
}

每次单击按钮时都会调用此ajax请求。这意味着每次单击按钮时，我的datatable的内容都会更改。我试图清理并重新加注，但没有用。。我试图摧毁它。。它不起作用。。每次我销毁数据表并执行脚本时，它都不会更改表的内容

我不确定我的代码出了什么问题。我的代码只在第一次起作用。。第二次单击按钮时，它不会更新我的数据表

谢谢

您需要：

• 使用

  empty（）

• 删除

  $（'#详细信息'）.dataTable（）.fndroduction（）

• 添加

  destroy:true

  选项

例如：

if（requests.length>0）{
//空桌子
$（“#详细信息”）.empty（）；
//…跳过。。。
变量表=$（“#详细信息”）.DataTable({
摧毁：没错，
//…跳过。。。
});
//…跳过。。。
}

请参见我在上面评论中所说的示例：

var数据表\=null；
var init=false；
var initDataTable=函数（）{
dataTable=$（'#table'）。dataTable({
preDrawCallback:函数（设置）{
},
drawCallback:函数（设置）{
if（init_==false）{
初始=真；
}
},
搜索：是的，
数据：[]，
fnCreatedRow：函数（nRow、aData、iDataIndex）{
},
是的，
是的，
回答：错，
服务器端：错，
自动宽度：false，
处理：假，
错:，
长度变化：错误，
fixedColumns:false，
信息：错，
选择：{
信息：错，
项目：“行”
},
dom:'Bfrtip'，
orderMulti:false，
条带分类：['dt-stripe-1'，'dt-stripe-2']，
栏目：[{
名称：“test1”，
数据：“test1”，
标题：“Test1”，
键入：“字符串”，
可订购：正确
},
{
名称：“test2”，
数据：“test2”，
标题：“Test2”，
键入：“字符串”，
可订购：正确
},
]
});
};
var ajaxFunction=函数（）{
$.ajax