Как динамически изменять высоту Datatables jQuery

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

Ответ 2

Текущий ответ не сработал у меня (используя v 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();
});

Ответ 3

Проще говоря:

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

Ответ 4

В новых версиях Datatables есть и другие методы, которые в сочетании с разумным использованием таймера для отслеживания триггеров событий изменения размера работают довольно хорошо. Я оставил "древнюю" строку "window.location.reload()" для тех, кто застрял с более старыми версиями DataTables - просто раскомментируйте ее и закомментируйте вызов table.draw().

Примечание: в документации сказано, что правильным вызовом является "table.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
});

Это.

Ответ 5

Для DataTables 1.10:

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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