Datatables on-fly resizing

Ответ 1

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

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

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

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

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

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

Ответ 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);
  });

Примечание. Этот ответ относится к DataTables 1.9

Ответ 3

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

$('#dataTable').resize()

Ответ 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,

Ответ 5

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

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

Ссылка: колонка настраивается в datatable

Ответ 6

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

Пример:

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

Ответ 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%');
    } );

Ответ 8

Вы пытались захватить событие div resize и сделать .fnDraw() в datatable? fnDraw должен изменить размер таблицы для вас

Ответ 9

Я получил это, чтобы работать следующим образом:

Сначала убедитесь, что в определении dataTable ваш массив aoColumns содержит sWidth данные, выраженные как% нефиксированные пиксели или ems. Затем убедитесь, что для свойства bAutoWidth установлено значение false Затем добавьте немного, но JS:

update_table_size = function(a_datatable) {
  if (a_datatable == null) return;
  var dtb;
  if (typeof a_datatable === 'string') dtb = $(a_datatable)
  else dtb = a_datatable;
  if (dtb == null) return;

  dtb.css('width', dtb.parent().width());
  dtb.fnAdjustColumSizing();
}

$(window).resize(function() {
  setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});

Работает с обработкой, и мои ячейки таблицы обрабатывают CSS white-space: wrap; (который не работал без установки sWidth, и именно это привело меня к этому вопросу.)

Ответ 10

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

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

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

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

Ответ 11

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

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

Ответ 12

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

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

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

Ответ 13

Несколько dataTables и вкладок это можно сделать динамически. В моем случае все таблицы имеют responsive класс

    $(document).ready(function() {
        $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
            const target = $(e.target).data('target');
            const tab    = $(target);
            if(tab.find('table.responsive')){
                tab.find('table.responsive').DataTable().columns.adjust().draw();
            }
        });
   });