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

javascript jquery datatables

112013 просмотра

13 ответа

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

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

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

Автор: Emphram Stavanger Источник Размещён: 20.06.2019 11:09

Ответы (13)


113 плюса

Решение

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

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

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

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

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

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

Автор: Allan Jardine Размещён: 26.11.2011 05:36

39 плюса

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

  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.

Автор: Stephen Размещён: 12.09.2012 03:10

18 плюса

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

$('#dataTable').resize()
Автор: jps Размещён: 08.04.2015 08:07

9 плюса

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

Автор: Rui Martins Размещён: 26.08.2016 02:31

8 плюса

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

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

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

Автор: Chintan Panchal Размещён: 11.05.2016 12:42

5 плюса

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

Пример:

$('#tableId').dataTable({
 "bAutoWidth": false
});
Автор: user2314493 Размещён: 15.04.2015 07:11

2 плюса

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

1 плюс

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

Автор: Keith.Abramo Размещён: 26.11.2011 02:15

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, и именно это привело меня к этому вопросу).

Автор: Dave Sag Размещён: 13.02.2013 02:39

1 плюс

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

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

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

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

Автор: Alberto Hormazabal Размещён: 30.10.2015 05:19

1 плюс

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

$('#dataTable').DataTable({'autoWidth':false, ...});
Автор: Emmanuel Robert Ssebaggala Размещён: 01.05.2017 10:21

1 плюс

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

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

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

Автор: StackOverflowUser Размещён: 19.05.2017 11:00

0 плюса

Несколько 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();
            }
        });
   });
Автор: jcarlosweb Размещён: 20.06.2019 08:05
Вопросы из категории :
32x32