使用Bootbox在弹出窗口中显示数据表

Question

我有以下JS函数，可在弹出窗口中显示日期列表。

在返回所需数据的AJAX调用之后调用此函数。

function Show(currentSchedule) {
    var scheduleDates = currentSchedule.Dates.join(", ");

    bootbox.dialog({
        title: "Preview",
        message: "<div class='row'><div class='box'>" + scheduleDates + "</div></div>"
    });
}

单击按钮时将调用此选项，它将日期显示为逗号分隔的值。

为了以表格格式显示此内容，我查看了Datatables.js库。

它需要一个模板表，期望的数据将被注入其中。当您在页面上显示数据时，这很好用。

<table style="width:100%" id="previewTable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>
                Date(s)
            </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

我无法弄清楚的是一种在弹出窗口而不是页面中显示表格的方法。

提前致谢。

Answer 1

强调

表以隐藏的<div>形式存储为模板。我正在克隆模板以设置唯一ID example。

var container = $('#example-container').clone();
container.find('table').attr('id', 'example');

使用show: false最初隐藏对话框。这是必需的，因此一旦显示对话框，我们就可以添加DataTables初始化函数。

var box = bootbox.dialog({
   show: false,
   message: container.html(),
   // ...
});    

显示对话框初始化DataTables时处理事件。

box.on("shown.bs.modal", function() {
   $('#example').DataTable(); 
});

显示对话框。

box.modal('show');          

演示版

有关代码和演示，请参见下面的示例。

box.on("shown.bs.modal", function() {
   $('#example').DataTable(); 
});

box.modal('show');