javascript - 在 Bootstrap Modal Close 上，清除 Datatable 的所有行

Question

我正在 Bootstrap 模式中打开数据表。它第一次打开时很好，但是当我尝试重新打开模式时，它没有刷新数据，只是添加到现有数据上。有没有办法让我在模式关闭时清除 tbody？

我的 HTML:

<div class="modal fade modal-xl" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title text-left" id="modal_title"></h4>
                                    <button type="button" class="close" id="close_header" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <div id="modal_content">
                                        <table id="modal_data"  class="display" border="1">
                                            <thead>
                                                <tr>
                                                    <th>One</th>
                                                    <th>Two</th>
                                                    <th>Three</th>
                                                    <th>Four</th>
                                                    <th>Five</th>
                                                    <th>Six</th>
                                                    <th>Seven</th>
                                                    <th>Eight Completes</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="close_footer"data-dismiss="modal">Close</button>
                                </div>
                            </div>

                        </div>
                    </div>

JavaScript:

点击柱形图(Highcharts)中的柱形:

events: {
          click: function() {
              let ver = this.series.name;
              getData(ver);
        }

 const getData = (v) => {
    $('#modal_title').text(v);
    $.getJSON(json, result => {
        result.forEach(d => {
            $("#modal_data>tbody").append(`
                <tr>
                    <td>${d.one}</td>
                    <td>${d.two}</td>
                    <td>${d.three}</td>
                    <td>${d.four}</td>
                    <td>${d.five}</td>
                    <td>${d.six}</td>
                    <td>${d.seven}</td>
                    <td>${d.eight}</td>
                </tr>
                `);

        });
        $('#modal_data').dataTable();
        $("#myModal").modal();
        $('#close_header, #close_footer').on('click', function() {
            $('#modal_data>tbody').dataTable().fnClearTable();
        });
    });
};

在关闭模式时，我想清除表格，以便在列上单击时创建一个新的数据表，而不是添加到旧表。

Answer 1

您可以使用 Bootstrap events，而不是将您的清除事件绑定(bind)到模式中的关闭按钮。当模态不再可见时运行清除。

$('#myModal').on('hidden.bs.modal', function (e) {
    console.log("I've closed!");
});

然后根据 DataTables 的文档，您可以使用 clear()清除表的方法。但是，一旦获得数据，您将需要重新绘制表格，使用 draw()方法。

就我个人而言，我会使用如下方法。

$('#myModal').on('hidden.bs.modal', function (e) {
    var table = $('#modal_data').DataTable();
    table.clear();
});

然后您可以从 getData 方法中删除单击事件。您需要调用 DataTable draw()重新呈现表格的方法。可能有一种更优雅的方式来重新绑定(bind)数据并使用 rows.add() 重新呈现表格。 ，但我认为我在这里的内容应该足以解决您的问题:)

const getData = (v) => {
    $('#modal_title').text(v);
    $.getJSON(json, result => {
        result.forEach(d => {
            $("#modal_data>tbody").append(`
                <tr>
                    <td>${d.one}</td>
                    <td>${d.two}</td>
                    <td>${d.three}</td>
                    <td>${d.four}</td>
                    <td>${d.five}</td>
                    <td>${d.six}</td>
                    <td>${d.seven}</td>
                    <td>${d.eight}</td>
                </tr>
                `);
        });
        var table = $('#modal_data').dataTable();
        table.destroy();
        table = $('#modal_data').dataTable();
        $("#myModal").modal();
});