Изменение размеров данных на лету

Question

Я использую чудесный плагин DataTables jQuery;http://datatables.net/ Добавлены дополнения FixedColumns и KeyTable.

Теперь размер таблицы корректно изменяется при изменении размера окна.Тем не менее, содержащий div таблицы также может быть изменен по ширине с помощью анимации jQuery, и я не нашел способа изменить размер таблицы с ним - он просто остается неизменным в своей первоначальной ширине.Только если я изменю ширину div в коде перед загрузкой страницы, размер таблицы будет корректно изменен.

Как я могу изменить размер DataTable на лету в соответствии с шириной окна и шириной содержащего div?Заранее спасибо!: -)

Answer 1

Что происходит, так это то, что DataTables устанавливает CSS-ширину таблицы, когда она инициализируется рассчитанным значением - это значение в пикселях, поэтому оно не будет изменяться при перетаскивании. Это происходит потому, что при изменении нумерации страниц таблица и столбцы (ширина столбцов также заданы) прыгают по ширине.

Что вы можете сделать, чтобы остановить это поведение в DataTables, для параметра autoWidth установлено значение false.

$('#example').dataTable( {
  "autoWidth": false
} );

Это остановит DataTables, добавив вычисленную ширину в таблицу, оставив вашу (предположительно) ширину: 100% в одиночку и позволив изменить ее размер. Добавление относительной ширины к столбцам также поможет остановить подпрыгивание столбцов.

Еще одна опция, встроенная в DataTables, - установить опцию sScrollX, чтобы включить прокрутку, так как DataTables установит для таблицы 100% ширину контейнера прокрутки. Но вам может не понадобиться прокрутка.

Префектное решение было бы, если бы я мог получить ширину таблицы CSS (при условии, что она применяется - то есть 100%), но без анализа таблиц стилей я не вижу способа сделать это (то есть, в основном, я хочу $ (). css ('ширина'), чтобы вернуть значение из таблицы стилей, а не значение, вычисленное в пикселях).

Answer 2

Я знаю, что это старая версия, но я только решил ее следующим образом:

  var update_size = function() {
    $(oTable).css({ width: $(oTable).parent().width() });
    oTable.fnAdjustColumnSizing();  
  }

  $(window).resize(function() {
    clearTimeout(window.refresh_size);
    window.refresh_size = setTimeout(function() { update_size(); }, 250);
  });

Примечание. Этот ответ относится к таблицам данных 1.9

Answer 3

Это помогло мне.

$('#dataTable').resize()

Answer 4

$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        // var target = $(e.target).attr("href"); // activated tab
        // alert (target);
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } ); 
});

у меня работает, с "autoWidth": false,

Answer 5

Вы должны попробовать это.

var table = $('#example').DataTable();
table.columns.adjust().draw();

Ссылка: настройка столбца в датированных данных

Answer 6

Используйте "bAutoWidth": false и просмотрите пример, приведенный ниже.Это работает для меня.

Пример:

$('#tableId').dataTable({
 "bAutoWidth": false
});

Answer 7

может быть поздно, как и другой ответ, но я сделал это в начале этого года, и решение, которое я нашел, - это использование css.

    $(window).bind('resize', function () {
        /*the line below was causing the page to keep loading.
        $('#tableData').dataTable().fnAdjustColumnSizing();
        Below is a workaround. The above should automatically work.*/
        $('#tableData').css('width', '100%');
    } );

Answer 8

Код ниже представляет собой комбинацию ответа Чинтана Панчаля и комментария Антуана Леклера (размещение кода в событии изменения размера окон).(Мне не нужен был отказ, упомянутый Антуаном Леклером, однако это может быть наилучшей практикой.)

  $(window).resize( function() {
      $("#example").DataTable().columns.adjust().draw();
  });

Это был подход, который работал в моем случае.

Answer 9

У меня была такая же проблема.Когда я свернул некоторые меню слева от моего веб-приложения, размер данных не изменился.Добавление "autoWidth": ложная инициализация duirng сработала для меня.

$('#dataTable').DataTable({'autoWidth':false, ...});

Answer 10

У меня была та же проблема, что и у ОП. У меня был DataTable, который не перенастраивал бы свою ширину после того, как анимация jQuery (toogle ("fast")) изменила размер своего контейнера.

После прочтения этих ответов и множества попыток и ошибок это помогло мне:

  $("#animatedElement").toggle(100, function() {    
    $("#dataTableId").resize();
  });

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