如何清空和重新填充 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

请看上面我在 cmets 中所说的示例：

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>