引导模式标题宽度问题中的数据表

Question

当我将scrollY 添加到部分视图中的数据表时，标题会被压缩到屏幕的左侧。当我单击标题进行排序时，它们正确扩展至 100%。使用滚动器选项并向下滚动足够远也会触发列的正确渲染。

查看每个列标题的宽度时，宽度设置为 0。执行上述操作之一后，宽度将被纠正为应有的样子。

从主视图触发以加载部分内容

$('a[data-target="#list-view-audits-modal"]').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "../Home/GetAudits",
        success: function (data) {
            $('body').append(data); //this adds the modal called below
            $('#list-audits-modal').modal('toggle')
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            WebUI.handleError(XMLHttpRequest, textStatus, errorThrown);
        }
    });
});

现在在部分视图中我调用以下命令来转换表格

$(function () {
var dt = $('#table-audits-results').DataTable({
    order: [[0, "desc"]],
    buttons: ['csv'],
    scrollY: 200,
    scroller: true,
    responsive: true
    });
});

我已经搜索并尝试了很多在其他帖子中找到的东西，但到目前为止还没有解决这个问题。我认为这与它在局部视图中的转换有关？

更新1

好吧，看来这是一个问题，因为模态还没有尺寸。为了测试这一点，我延迟了转换数据表的触发器，并且标头现在是正确的。

现在我需要弄清楚如何在模态具有大小时触发此操作，以便用户看不到标准表并观看它转换为数据表。

更新2

我已尝试以下操作，但您仍然会在转换之前看到大量数据加载

$(document).on('show.bs.modal', '#list-audits-modal', function () {
    alert('triggered');
    var dt = $('#table-audits-results').DataTable({
        order: [[0, "desc"]],
        buttons: ['csv'],
        scrollY: 200,
        scroller: true,
        responsive: true
    });
});

更新3

我认为这并不理想，因为用户看到标题不正确仍然存在延迟，因此仍在寻找更好的解决方案

我在局部视图中使用的内容。

var dt = $('#table-audits-results').DataTable({
    order: [[0, "desc"]],
    dom: 'Bfrtip',
    buttons: ['csv'],
    scrollY: 200,
    scroller: true,
    responsive: true
});

$(document).on('shown.bs.modal', '#list-audits-modal', function () {
    dt.columns.adjust().draw();
});

Answer 1

$(document).on('shown.bs.modal', '#list-audits-modal', function () {
    dt.columns.adjust().draw();
});

很好但是

 $(document).on('shown.bs.modal', '#list-audits-modal', function () {
        dt.columns.adjust();
    });

也可以

如果.draw()服务器处理打开，则会向服务器发送另一个请求