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

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

fnAdjustColumnSizing()

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

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

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

Спасибо заранее.

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

Это работа для меня, как было сказано ОливьеH:

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