Question

我有一个像这样的数据表：

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

我的数据表的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，但仍然没有运气。

有什么想法吗？

由于

Answer 1

我遇到了类似的问题，但这是我的解决方案：

   $("#myTable").DataTable({scrollY: 100}); 
   // ...
   $("#myTable").DataTable({retrieve: true}).destroy();
   // ...
   $("#myTable").DataTable({scrollY: 200});

我之所以这样做，是因为dataTables只需一次初始化即可运行。上面第二个可执行行上的检索选项只返回实例而不重新初始化dataTable，然后我在其上调用destroy - 它恢复了插件对DOM所做的所有更改。 a简单的重新初始化是根据需要改变高度的脏修复。

更改数据表ScrollY单击按钮

1 个答案: