99
rated 0 times
[
100]
[
1]
/ answers: 1 / hits: 37331
/ 13 Years ago, thu, october 6, 2011, 12:00:00
I am using a Jquery Datatables table with bPaginate = false and sScrollY is some fixed height. Ultimately I want the table to resize on the window.resize event.
To get this to work I have built a smaller testcase: In the following code snippets I want the table to resize when I click the button
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
});
Console output is as expected:
Handler for .click() called.
old:350px
new:150px
but the table doesn't update! Any idea what I am doing wrong?
A live example can be found here: http://jsbin.com/anegiw/12/edit
More From » jquery
