Tablas de datos: Cambiar la altura de la tabla no funciona

Estoy usando una tabla Jquery Datatables con bPaginate = false y sScrollY es una altura fija. En última instancia, quiero que la tabla cambie de tamaño en el evento window.resize.Tablas de datos: Cambiar la altura de la tabla no funciona

Para conseguir que esto funcione he construido un caso de prueba más pequeños: En los siguientes fragmentos de código que quiero la mesa para cambiar el tamaño al hacer clic en el botón

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
<script type="text/javascript" language="javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <input id="button" type="button" value="Click me!" /> 
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 

      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd gradeX"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 4.0</td> 
      <td>Win 95+</td> 
      <td class="center"> 4</td> 
      <td class="center">X</td> 

     </tr> 
     <tr class="even gradeC"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.0</td> 
      <td>Win 95+</td> 
      <td class="center">5</td> 
      <td class="center">C</td> 

     </tr> 
     <tr class="odd gradeA"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.5</td> 
      <td>Win 95+</td> 
      <td class="center">5.5</td> 
      <td class="center">A</td> 

     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 

      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </tfoot> 
</table> 
    </body> 
</html>

Javascript:

$('#button').click(function() { 
    console.log('Handler for .click() called.'); 
    table = $('#example').dataTable(); 
    settings = table.fnSettings(); 
    console.log('old:' + settings.oScroll.sY); 
    settings.oScroll.sY = '150px'; 
    console.log('new:' + settings.oScroll.sY); 
    table.fnDraw(false); 
}); 
$('#example').dataTable({ 
    "sScrollY": "350px", 
    "bPaginate": false, 
    "bJQueryUI": true 
});

salida

consola es el esperado:

Handler for .click() called. 
old:350px 
new:150px

¡pero la tabla no se actualiza! ¿Alguna idea de lo que estoy haciendo mal?

Un ejemplo vivo se puede encontrar aquí: http://jsbin.com/anegiw/12/edit

Fuente

2011-10-06 dwergkees

intenta configurar "bDestroy": verdadero –

Eso reiniciaría la tabla, por lo que podría funcionar para este fragmento particular. Pero, ¿sería apropiado para un controlador de eventos window.resize, que se llama muchas veces durante el cambio de tamaño de la ventana de broser? – dwergkees

En realidad, acabo de probarlo en el evento window.resize: funciona pero es terriblemente lento, incluso en una máquina moderna – dwergkees

Ok lo que parece funcionar muy bien es hacer del grifo en los elementos añadidos por el marco datatbables:

$(window).resize(function() { 
    console.log($(window).height()); 
    $('.dataTables_scrollBody').css('height', ($(window).height() - 200)); 
}); 

$('#example').dataTable({ 
    "sScrollY": ($(window).height() - 200), 
    "bPaginate": false, 
    "bJQueryUI": true 
});

Este ejemplo permite cambiar el tamaño de la mesa sin problemas con la ventana.

ejemplo vivo: http://jsbin.com/anegiw/18/edit

Fuente

2011-10-07 18:48:36 dwergkees

Podría darse el caso de que el valor sScrollY sólo establece el tamaño de la tabla de la inicialización y luego, cuando se cambia el valor no reside la tabla. Ese valor solo se puede usar para indicar a las tablas de datos "después de que esta cantidad de desplazamiento genere más resultados", por lo que es posible que tenga que crear una fachada que actualice el sScrollY y luego actualice manualmente el ancho css de esa tabla a la altura deseada.

Fuente

2011-10-06 20:57:20

Explicaría mucho, pero hay otras preguntas, donde la respuesta es que * debería * trabajo: http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

que esto esté arreglado para mí:

#data_wrapper.dataTables_wrapper 
{ 
    height: 700px !important; 
    background-color: #F1F1F1 !important; 
} 
#data_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-helper-clearfix.ui-corner-bl.ui-corner-br 
{ 
     position: absolute; 
     width: 100%; 
     bottom: 0; 
}

Usted puede cambiar la altura como por su número de registros.

Fuente

2014-09-05 16:44:36

Tablas de datos: Cambiar la altura de la tabla no funciona

Respuesta

Cuestiones relacionadas