Настраивается несколько таблиц данных и только один заголовок таблицы

Question

У меня есть несколько таблиц данных, и из-за их настройки при загрузке dom заголовки смещены.Я использовал:

    $('.myclass').on('shown.bs.modal', function (e) {
       $($.fn.dataTable.tables(true)).DataTable()
       .columns.adjust()
       .fixedColumns().relayout();
     })

Это немного сработало, был скорректирован только финальный стол из четырех.Я хотел бы, чтобы все таблицы корректировались при отображении.Есть другое решение или я что-то упустил?

Пример, связанный ниже

https://jsfiddle.net/aq9Laaew/231606/

Answer 1

Зачем пытаться преобразовать $.fn.dataTable.tables в экземпляр jQuery?Но посмотрите на документы и сделайте это вместо этого:

$('div.modal').on('shown.bs.modal', function (e) {
  var tables = $.fn.dataTable.tables({ api: true });
  tables.columns.adjust().draw();
  tables.fixedColumns().relayout().draw();
});

Вы можете visible: true к параметрам, если вы просто хотите нацелиться на модал, который составляет околобыть показано.