Datatables: Thay đổi chiều cao của bảng không hoạt động

Tôi đang sử dụng bảng Jquery Datatables với bPaginate = false và sScrollY là một số chiều cao cố định. Cuối cùng tôi muốn bảng thay đổi kích thước trên sự kiện window.resize.Datatables: Thay đổi chiều cao của bảng không hoạt động

Để có được điều này để làm việc tôi đã xây dựng được một testcase nhỏ: Trong đoạn mã sau đây tôi muốn bảng để thay đổi kích thước khi tôi nhấp vào nút

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

Đầu ra của bảng điều khiển như mong đợi:

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

nhưng bảng không cập nhật! Bất kỳ ý tưởng những gì tôi đang làm sai?

Một ví dụ sống có thể được tìm thấy ở đây: http://jsbin.com/anegiw/12/edit

Nguồn

2011-10-06 dwergkees

cố gắng đặt "bDestroy": true –

Điều đó sẽ khởi tạo lại bảng, do đó, nó có thể hoạt động cho đoạn mã phân tách này. Nhưng nó sẽ là thích hợp cho một handler sự kiện window.resize, được gọi là nhiều lần trong một thay đổi kích thước của cửa sổ broser? – dwergkees

Trên thực tế, tôi vừa thử nó trong sự kiện window.resize: nó hoạt động nhưng cực kỳ chậm, ngay cả trên một máy hiện đại – dwergkees

Ok những gì có vẻ làm việc độc đáo là để làm tap vào các yếu tố bổ sung bởi khuôn khổ 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 
});

Ví dụ này cho phép thay đổi kích thước bàn thông suốt với cửa sổ.

Sống dụ: http://jsbin.com/anegiw/18/edit

Nguồn

2011-10-07 18:48:36 dwergkees

Nó có thể là trường hợp đó giá trị sScrollY chỉ thiết lập kích thước của bảng trên khởi tạo và sau đó khi bạn thay đổi giá trị nó không cư trú bàn. Giá trị đó chỉ có thể được sử dụng để nói cho datatables "sau khi lượng cuộn này hiển thị nhiều kết quả hơn", do đó bạn có thể phải tạo mặt tiền cập nhật sScrollY và sau đó cập nhật thủ công chiều rộng css của bảng đó đến độ cao mong muốn.

Nguồn

2011-10-06 20:57:20

Nó sẽ giải thích rất nhiều, nhưng có những câu hỏi khác, câu trả lời là nó * nên * công việc: http://stackoverflow.com/questions/7634066/how-to-dynamically-change-jquery-data-tables-height – dwergkees

này cố định nó cho tôi:

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

Bạn có thể thay đổi chiều cao theo số điện thoại của hồ sơ.

Nguồn

2014-09-05 16:44:36

Datatables: Thay đổi chiều cao của bảng không hoạt động

Trả lời

Các vấn đề liên quan