Datatables: modifica dell'altezza della tabella non funzionante

Sto utilizzando una tabella Datatables Jquery con bPaginate = false e sScrollY è un'altezza fissa. In definitiva voglio ridimensionare la tabella sull'evento window.resize.Datatables: modifica dell'altezza della tabella non funzionante

Per arrivare a questo lavoro ho costruito un TestCase più piccola: Nei seguenti frammenti di codice che voglio tavolo per ridimensionare quando si fa clic sul pulsante

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

uscita

Console è come previsto:

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

ma la tabella non si aggiorna! Qualche idea su cosa sto facendo male?

Un esempio dal vivo può essere trovato qui: http://jsbin.com/anegiw/12/edit

fonte

2011-10-06 dwergkees

provare a impostare "bDestroy": true –

Ciò reinizializza la tabella, quindi potrebbe funzionare per questo particolare snippet. Ma sarebbe appropriato per un gestore di eventi window.resize, che viene chiamato più volte durante il ridimensionamento della finestra del broser? – dwergkees

In realtà, l'ho appena provato nell'evento window.resize: funziona ma è terribilmente lento, anche su una macchina moderna – dwergkees

Ok quello che sembra funzionare bene è di fare del rubinetto negli elementi aggiunti dal quadro 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 
});

Questo esempio consente la tabella ridimensionare senza problemi con la finestra.

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

fonte

2011-10-07 18:48:36 dwergkees

Potrebbe essere il caso che il valore sScrollY imposta solo la dimensione della tabella in inizializzazione e poi, quando si modifica il valore non risiede al tavolo. Tale valore potrebbe essere utilizzato solo per indicare i datatables "dopo questa quantità di scorrimento restituisce più risultati", quindi potrebbe essere necessario creare una facciata che aggiorni lo sScrollY e aggiorni manualmente la larghezza css di tale tabella all'altezza desiderata.

fonte

2011-10-06 20:57:20

Spiegherebbe molto, ma ci sono altre domande, dove la risposta è che * dovrebbe * lavoro: http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

questa fissa per me:

#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; 
}

È possibile cambiare l'altezza secondo il vostro numero di record.

fonte

2014-09-05 16:44:36

Datatables: modifica dell'altezza della tabella non funzionante

risposta

Problemi correlati