Datatables: Zmień wysokość tabeli nie działa

Używam tabeli Jquery Datatables z bPaginate = false, a sScrollY to pewna stała wysokość. Ostatecznie chcę, aby tabela zmieniła rozmiar w zdarzeniu window.resize.Datatables: Zmień wysokość tabeli nie działa

Aby uzyskać to do pracy I zbudowali mniejszy testcase: W poniższych fragmentów kodu chcę tabelę, aby zmienić rozmiar po kliknięciu przycisku

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

wyjście

Konsola jest zgodnie z oczekiwaniami:

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

, ale tabela nie aktualizuje się! Każdy pomysł, co robię źle?

Żywy przykład można znaleźć tutaj: http://jsbin.com/anegiw/12/edit

Źródło

2011-10-06 dwergkees

spróbuj ustawić "bDestroy": true –

To spowoduje ponowne zainicjowanie tabeli, więc może działać dla tego fragmentu kodu. Ale czy byłoby właściwe dla programu obsługi zdarzeń window.resize, który jest wywoływany wiele razy podczas zmiany rozmiaru okna broser? – dwergkees

Właściwie, właśnie wypróbowałem to w zdarzeniu window.resize: działa, ale jest strasznie powolne, nawet na nowoczesnej maszynie. – dwergkees

Ok, co wydaje się działać dobrze jest zrobić kran do elementów dodanych przez ramy 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 
});

Przykład ten pozwala płynnie zmieniać rozmiar tabeli z okna.

żywo przykład: http://jsbin.com/anegiw/18/edit

Źródło

2011-10-07 18:48:36 dwergkees

Może być tak, że tylko wartość sScrollY ustawia rozmiar tabeli na initialize a następnie po zmianie wartości nie mieszkają ze stołu. Ta wartość może być użyta tylko do wskazania datatables "po tym, jak ta ilość przewijania wyświetli więcej wyników", więc możesz utworzyć elewację, która zaktualizuje sScrollY, a następnie ręcznie zaktualizuje szerokość css tej tabeli do żądanej wysokości.

Źródło

2011-10-06 20:57:20

To by wyjaśniało wiele, ale są inne pytania, na które odpowiedź brzmi, że to * powinno * praca: http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

to ustalone to dla mnie:

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

Możesz zmienić wysokość jak na swoje liczby rekordów.

Źródło

2014-09-05 16:44:36

Datatables: Zmień wysokość tabeli nie działa

Odpowiedz

Powiązane problemy