javascript - 单击按钮更改数据表 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 留空并使用 CSS 和 javascript 添加 height 但仍然没有运气。

有什么想法吗？

谢谢

Answer 1

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

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

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