Как динамически изменять высоту таблиц данных jQuery

ProgramBox

Как динамически изменять высоту таблиц данных jQuery

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я использую таблицы данных jQuery. Я хочу изменять высоту таблицы всякий раз, когда пользователь изменяет размер окна. Я могу перехватить событие изменения размера окна, которое позволяет мне вычислить новую высоту. Как я могу назначить новую высоту объекту datatable?

Ответ №1:

Вы можете использовать следующий код:

 var calcDataTableHeight = function() {
  return $(window).height() * 55 / 100;
};

var oTable = $('#reqAllRequestsTable').dataTable({
  "sScrollY": calcDataTableHeight();
});

$(window).resize(function() {
  var oSettings = oTable.fnSettings();
  oSettings.oScroll.sY = calcDataTableHeight(); 
  oTable.fnDraw();
});

1. @paul: при изменении размера окна браузера datatable автоматически изменит высоту на высоту браузера.

2. @Raje Я знаю, как работает код. Я просто не знаю, почему он умножает на 55/100. Похоже на случайное число, выбранное для конкретной страницы, а не то, что вы бы рекомендовали как часть общего решения.

3. @paul Я думаю, что это просто примерное значение, учитывая тот факт, что OP хочет изменить размер своих таблиц в зависимости от окна.

4. @Anzeo Да, я согласен. Я использовал другое значение в своей реализации. Я также использовал параметр smartresize, показанный в приведенном ниже ответе rynop, который является более актуальным ответом.

5. @paul согласился, я также использовал ответ rynop вместо принятого.

Ответ №2:

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

 var defaultOptions = {...};//your options
var calcDataTableHeight = function() {
    //TODO: could get crazy here and compute (parent)-(thead tfoot)
    var h = Math.floor($(window).height()*55/100);
    return h   'px';
};

defaultOptions.sScrollY = calcDataTableHeight();

var oTable = this.dataTable(defaultOptions);

$(window).smartresize(function(){  
    $('div.dataTables_scrollBody').css('height',calcDataTableHeight());
    oTable.fnAdjustColumnSizing();
});

1. Я использую расширение скроллера, и установка высоты с помощью CSS сбрасывается при прокрутке, поэтому этот подход не работает. Принятый ответ сработал для меня с 1.10.0 beta 2, хотя.

Ответ №3:

При использовании более новых версий таблиц данных существуют и другие методы, которые в сочетании с разумным использованием таймера для просмотра триггеров события изменения размера работают довольно хорошо. Я оставил «древнее» окно.строка location.reload()» для тех, кто застрял при запуске старых версий таблиц данных — просто раскомментируйте ее и закомментируйте вызов «table.draw ()».

Кроме того, в документации говорится, что правильный вызов — «таблица.Draw()» — это не относится к версии, которую я использую (все вызовы в нижнем регистре).

 $(window).on('resize', function(e) 
{
  if (typeof resizeTimer !== 'undefined') {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(function() 
  { 

    // Get table context (change "TABLENAME" as required)
       var table = $('#TABLENAME').DataTable();                                 

    // Set new size to height -100px
       $('.dataTables_scrollBody').css('height', window.innerHeight-100 "px");      

    // Force table redraw
       table.draw();        

    // Only necessary for ancient versions of DataTables - use INSTEAD of table.draw()
       // window.location.reload();
  }, 250);    // Timer value for checking resize event start/stop
});

Вот и все.

1. Большое вам спасибо! Это правильный ответ для таблиц данных 1.10.X. Единственное, чего не хватает, это чтобы плагин скроллера знал об изменении высоты.

2. Если используется скроллер, вместо table.draw() него нужно вызвать table.scroller.measure(true) .

3. @ypnos, спасибо, я пробую это в одном из наших развертываний (где IE имеет проблему с пересчетом кода) и обновлю.

4. Это работает почти идеально в 1.10.X. Единственное, с чем я бы обернул clearTimeout(resizeTimer) инструкцию, if (typeof resizeTimer !== 'undefined') { чтобы избежать ошибки JS.

5. @lodb потрясающее предложение. Не стесняйтесь изменять, если хотите.

Ответ №4:

Для таблиц данных 1.10:

             $("#table").DataTable( {
              scrollY: '250px',
              scrollCollapse: true,
              paging: false,
            });

            $('#table').closest('.dataTables_scrollBody').css('max-height', '500px');
            $('#table').DataTable().draw();

Когда вы изменили CSS, вы должны вызвать draw() .

Ответ №5:

Проще говоря, так:

 $('#example').dataTable({
   "sScrollY": "auto"
});

Ответ №6:

Это работа для меня

 $(document).ready(function () {
            $('#dataTable1').dataTable({
                "scrollY": 150,
                "scrollX": 150
            });
            $('.dataTables_scrollBody').height('650px');
        });

Ответ №7:

Вот простое решение, описанное здесь

     $(document).ready(function() {
        $('#example').DataTable( {
            scrollY:        '50vh',
            scrollCollapse: true,
            paging:         false
        });
    });

vh относительно 1% высоты окна просмотра*

Вы можете использовать единицу измерения vh для установки высоты, которая зависит от размера окна.

Поддерживается в: Chrome 20.0 , IE 9.0 , FireFox 19.0 , Safari 6.0 , Opera 20.0

Ответ №8:

Я думаю, вы можете изменить высоту таблицы с помощью css

 $(window).resize(function(){
       $('#yourtable').css('height', '100px');
});