Изменение размера Datatables на лету

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

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

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

50
datatables javascript jquery

12 ответов

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

чтобы остановить это поведение в DataTables, установите autoWidth

100

Я знаю, что это старый, но я просто решил с этого:

  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

36

Это сделал трюк для меня. 

$('#dataTable').resize()
17

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

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

ссылки: настройка столбца в datatable

7
$(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,

7

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

пример:

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

может быть поздно, как и другой ответ, но я сделал это в начале этого года, и решение, которое я придумал, использует 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%');
    } );
2

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

1

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

сначала убедитесь, что в вашей 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);
});

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

1

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

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

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

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

1

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

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

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

1

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

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