jquery - 引导模态标题宽度问题中的DataTables

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



查看每个列标题的宽度时，该宽度设置为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

好的，所以这似乎是一个问题，因为模态还没有大小。为了测试这一点，我延迟了转换数据表的触发，现在头文件是正确的。

现在，我需要弄清楚模态一旦具有大小，如何立即触发此操作，以便用户看不到标准表，而是看着它转换成DataTables。

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

最佳答案

$(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()将在服务器处理打开的情况下向服务器发送另一个请求