单击按钮更改数据表 ScrollY
Change datatables ScrollY clicking on button
我有一个这样的数据表:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT something";
$get_result = sqlsrv_query($conection,$query);
while($row = sqlsrv_fetch_array($get_result)){
$dest = $row['dest'];
$num1 = $row['num1'];
$num2 = $row['num2'];
$num3 = $row['num3'];
echo "<tr>
<td class='hidden'>{$dest}</td>
<td>{$num1}</td>
<td>{$num2}</td>
<td>{$num3}</td>
</tr>";
}
sqlsrv_close($conection);
?>
</tbody>
</table>
<div class="the_button">
<a href="#" id="view_all_link" class="button">View All</a>
</div>
还有我的 dataTable js :
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "100px", // Here
"scrollCollapse": true,
"paging": false,
"ordering": false,
"info": false,
initComplete: function () {
this.api().columns([0]).every( function () {
var column = this;
var select = $('<select><option value="">Select Option</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
});
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
所以让我们解决我的问题。
我想在单击 按钮查看全部时 将 ScrollY
从 100px 更改为 auto
值或 500px 例如
我尝试了很多在社区中找到的例子,但不是偶然的。
我尝试用 js 更改 css 但不是运气。
$('.dataTables_scrollBody').css('height', 400); Not working for me this one
我也尝试将 ScrollY 留空并添加 height
与 CSS
和 javascript
但仍然没有成功。
有什么想法吗?
谢谢
我遇到过类似的问题,但这是我的解决方案:
$("#myTable").DataTable({scrollY: 100});
// ...
$("#myTable").DataTable({retrieve: true}).destroy();
// ...
$("#myTable").DataTable({scrollY: 200});
我这样做是因为数据表旨在 运行 进行一次初始化。上面第二个可执行行上的检索选项仅 returns 没有重新初始化数据表的实例,然后我对其调用销毁 - 这将恢复插件对 DOM 所做的所有更改。简单的重新初始化是根据需要更改高度的脏修复。
我有一个这样的数据表:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT something";
$get_result = sqlsrv_query($conection,$query);
while($row = sqlsrv_fetch_array($get_result)){
$dest = $row['dest'];
$num1 = $row['num1'];
$num2 = $row['num2'];
$num3 = $row['num3'];
echo "<tr>
<td class='hidden'>{$dest}</td>
<td>{$num1}</td>
<td>{$num2}</td>
<td>{$num3}</td>
</tr>";
}
sqlsrv_close($conection);
?>
</tbody>
</table>
<div class="the_button">
<a href="#" id="view_all_link" class="button">View All</a>
</div>
还有我的 dataTable js :
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "100px", // Here
"scrollCollapse": true,
"paging": false,
"ordering": false,
"info": false,
initComplete: function () {
this.api().columns([0]).every( function () {
var column = this;
var select = $('<select><option value="">Select Option</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
});
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
所以让我们解决我的问题。
我想在单击 按钮查看全部时 将 ScrollY
从 100px 更改为 auto
值或 500px 例如
我尝试了很多在社区中找到的例子,但不是偶然的。
我尝试用 js 更改 css 但不是运气。
$('.dataTables_scrollBody').css('height', 400); Not working for me this one
我也尝试将 ScrollY 留空并添加 height
与 CSS
和 javascript
但仍然没有成功。
有什么想法吗?
谢谢
我遇到过类似的问题,但这是我的解决方案:
$("#myTable").DataTable({scrollY: 100});
// ...
$("#myTable").DataTable({retrieve: true}).destroy();
// ...
$("#myTable").DataTable({scrollY: 200});
我这样做是因为数据表旨在 运行 进行一次初始化。上面第二个可执行行上的检索选项仅 returns 没有重新初始化数据表的实例,然后我对其调用销毁 - 这将恢复插件对 DOM 所做的所有更改。简单的重新初始化是根据需要更改高度的脏修复。