javascript - 带有高级工具的波尔图主题基本表的问题

Question

我有 JSON 数据，我正在构建我的表。下面是我的代码的摘录。

var table = '';
table = " <table class='table table-bordered table-striped mb-0' id='datatable-tabletools'>";
table += "<thead>";
table += "<tr>";
table += "<th> <i class='glyphicon glyphicon-wrench'></i> Actions</th>";

table += "<th>PAX</th>";
table += "<th>Group No</th>";
table += "<th>Group Name</th>";

table += "</tr>";
table += "</thead>";

table += "<tbody>";

for (var j = 0; j < data.length; j++) {
    table += "<tr>";

    table += "<td>" + data[j]["PAX"] + "</td>";
    table += "<td>" + (data[j]["GroupNo"] == undefined ? '' : data[j]["GroupNo"]) + "</td>";
    table += "<td>" + (data[j]["GroupName"] == undefined ? '' : data[j]["GroupName"]) + "</td>";

    table += "</tr>";
}

table += "</tbody>";
table += "</table>";

$('#gridContainer').html(table);
$("table#datatable-tabletools").dataTable();

正如您在上面的代码中看到的那样，我试图将其附加到 id="gridContainer" 的 div 中。到目前为止，我已经按要求启动并运行了，但问题是我的导出栏根本没有出现。目前，搜索、排序功能和表格结构都很好。下面是它当前外观的屏幕截图。

但是，当我声明一个静态表而不是将表附加到 DIV 标记时，它看起来很好，并且导出选项也出现并且是功能性的。这就是顶部标题的外观

如何解决这个问题？

标签： javascripthtml-table