DataTables в boottrap modal header width issue

Question

Когда я добавляю scrollY к данным в частичном представлении, заголовки уплотняются в левой части экрана. Когда я нажимаю заголовок для сортировки, они расширяются корректно до 100%. Использование опции скроллера и прокрутка вниз достаточно далеко также приводит к правильному отображению столбцов.

При взгляде на ширину заголовка каждого столбца, ширина устанавливается в 0. После выполнения одним из описанных выше, ширина затем корректируется, как они должны быть.

Trigger с основной целью, чтобы загрузить частичную

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

Я искал и попытался так много вещей, я нашел в других сообщениях, но до сих пор ничто не разрешило эту проблему. Я предполагаю, что это имеет какое-то отношение к тому, что оно трансформируется в частичном представлении?

Update 1

Ok, так что кажется, что это проблема, потому что модальный не имеет размера еще. Чтобы проверить это, я поставил задержку в триггере преобразования данных, и заголовки теперь верны.

Теперь мне нужно выяснить, как вызвать это, как только модаль имеет размер, чтобы пользователь не видел стандартную таблицу и не смотрел, как она преобразуется в DataTables.

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

Update 3

I не верьте, что это идеально, поскольку все еще есть задержка, что пользователь видит неправильные заголовки, так что все еще ищет лучшее решение

Что я использую в частичном представлении.

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() посылал другой запрос на сервер Если сервер обработка включена