Cómo cambiar dinámicamente la altura de jQuery Datatables

Solución:

Puede utilizar el siguiente código:

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();
});

La respuesta actual no funcionó para mí (usando v 1.9.1). Creo que esta solución no solo funciona, sino que funcionará mejor (y se basa en la sugerencia del autor). Este ejemplo utiliza smartresize para resolver problemas de cambio de tamaño de ventanas de varios navegadores.

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();
});

Al usar versiones más nuevas de Datatables, existen otros métodos que, cuando se combinan con el uso juicioso de un temporizador para ver los desencadenantes de eventos de cambio de tamaño, funcionan bastante bien. Dejé la línea “antigua” “window.location.reload ()” para aquellos que están atascados ejecutando versiones anteriores de DataTables – simplemente descomente y comente la llamada “table.draw ()”.

Nota al margen, la documentación dice que la llamada correcta es “table.Draw ()” – ese no es el caso en la versión que estoy usando (la llamada está en minúsculas).

$(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
});

Eso es todo.

---

---

Utiliza Nuestro Buscador