Как изменить размер JQuery / Datatable после скрытия столбцов

Question

Я использую плагин DataTables для JQuery, моя проблема в основном заключается в том, что моя таблица данных имеет много столбцов и (визуально) выходит за границы своего контейнера (тега div).Затем я скрываю некоторые столбцы, которые на данный момент не имеют значения.Но ширина таблицы просто не меняет ее размер (скажем, с указанием его родителя).Я попытался использовать функцию

fnAdjustColumnSizing()

после создания таблицы данных, но она, похоже, не работает (я также попытался перерисовать таблицу с помощью fnDraw ()).Я также попытался дать некоторые начальные параметры, чтобы получить меньший размер для каждого столбца

$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]});

, но он выдает ошибку, так как мне нужно «включить» параметр bRetrieve (что я сделал позже, но это не сработало, это просто предотвратило появление ошибки).Итак ... технически я хочу сделать свои данные меньшими после того, как некоторые столбцы будут скрыты.

Заранее спасибо.

Answer 1

Решение было на самом деле проще, чем я думал.Используя функцию «проверить элемент» в Google Chrome, я обнаружил, что при вызове метода «datatable ()» datatables API datatables использовал фиксированную ширину, основанную на пространстве, необходимом для отображения количества столбцов.Это было что-то вроде 1947 пикселей или около того.Поэтому вы не можете изменить это с помощью простого CSS, потому что фиксированная ширина, используемая таблицами данных, имеет более высокий приоритет.Решением, которое я нашел, было использование метода jquery «width» после скрытия столбцов:

$("#reportTable").width("100%");

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

Answer 2

Это работа для меня, как уже упоминал ОливьеH:

$('#your_datatable_selector').width('auto');

Answer 3

Чтобы установить ширину столбцов в таблицах данных, я назначаю столбцам разные классы с помощью параметра sClass, а затем устанавливаю ширину с помощью css.

Если столбец находится в данных, но вы не хотите, чтобы он был видимым, установите для bVisible значение false, и он не будет отображать столбец, а не будет пытаться скрыть его после отображения.