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

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

标签： javascriptjquerytwitter-bootstrapdatatablebootstrap-modal

Answer 1

当模态不再可见时，您可以使用引导事件来运行您的清除，而不是将您的清除事件绑定到模态中的关闭按钮。

$('#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()方法来重新呈现您的表格。可能有一种更优雅的方式来重新绑定您的数据并使用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();
});