更改数据表 ScrollY 单击按钮

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 旨在通过一次初始化运行。上面第二个可执行行的retrieve 选项只返回实例而不重新初始化dataTable，然后我调用它的destroy - 这将恢复插件对DOM 所做的所有更改。一个简单的重新初始化是根据需要更改高度的脏修复。