Datatables: Tablo yüksekliğini değiştir çalışmıyor

bPaginate = false ile bir Jquery Datatables tablosu kullanıyorum ve sScrollY bazı sabit yüksekliktir. Sonunda tablonun window.resize olayında yeniden boyutlandırılmasını istiyorum.Datatables: Tablo yüksekliğini değiştir çalışmıyor

<!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:

Aşağıdaki kod snippet'leriyle içinde ben düğmeye

HTML tıkladığınızda boyutlandırmak için tabloyu istiyorum:

bu daha küçük bir dizge kurmuş işe almak için

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

Konsol çıkış olarak beklenir:

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

ancak çizelge güncellenmiyor! Ne yapıyorum yanlış yapıyorum?

canlı bir örnek

burada bulunabilir: http://jsbin.com/anegiw/12/edit

kaynak

2011-10-06 dwergkees

"bDestroy" öğesini ayarlamayı deneyin: true –

Bu tabloyu yeniden başlatır, bu nedenle bu parçacık snippet'i için işe yarayabilir. Ancak, puset penceresinin yeniden boyutlandırılması sırasında birçok kez çağrılan bir window.resize olay işleyicisi için uygun olur mu? – dwergkees

Aslında, sadece window.resize olayında denedim: çalışır, ancak modern bir makinede bile çok yavaş, – dwergkees

Tamam datatbables çerçevesi tarafından eklenen elemanlar içine dokunun yapmaktır:

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

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

Bu örnek tablo penceresi ile sorunsuz yeniden boyutlandırabilirsiniz.

Canlı örnek:

kaynak

2011-10-07 18:48:36 dwergkees

O sScrollY değeri yalnızca initialize tablonun boyutunu ayarlar ve değerini değiştirdiğinizde o tabloyu ikamet etmediğini durum olabilir. Bu değer yalnızca "bu miktarda kaydırma işleminden sonra daha fazla sonuç elde edilmesinin ardından" veri kümelerini anlatmak için kullanılabilir, bu nedenle sScrollY'yi güncelleyen bir cephenin oluşturulması ve daha sonra söz konusu tablonun css genişliğini istenen yüksekliğe elle güncellemeniz gerekebilir. güzel iş gibi görünüyor neyi

kaynak

2011-10-06 20:57:20

Çok açıklar ama başka sorular da var, cevabın burada * olması gereken * çalışma: http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

http://jsbin.com/anegiw/18/edit Bu benim için düzelttim:

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

Sen kayıtların Numarana göre yüksekliğini değiştirebilir.

kaynak

2014-09-05 16:44:36

Datatables: Tablo yüksekliğini değiştir çalışmıyor

cevap

İlgili konular