Question

我无法在datatable中显示垂直滚动条。我的HTML结构如下：

<div class="table-container" id="table-order">
  <div class="order-container" style="height:50%;overflow:hidden;"> <!--Style set dynamically-->
    <div class="title-div">
      //Table title
    </div>
    <div class="result-set">
       <table id="order-table-text"></table>
    </div>
  </div>
</div>

我的jQuery是：

  $('#order-table-text').DataTable({
      bAutoHeight: true,
      data: dataSet,
      deferRender: true,
      fixedHeader: true,
      scrollY: '50%',
      scrollX: '800px',
      scrollCollapse: true,
      scroller: {
          displayBuffer: 1,
          boundaryScale: 1
      },
      dom: 'frtiS',
      autowidth: true
  })

我不确定为什么表在任一轴上都不可滚动。我该怎么做才能解决这个问题？

Answer 1

无法使用scrollY的百分比高度。在CSS中，百分比高度不能很好地工作。但是，您可以使用vh units：scrollY: '50vh'，效果很好。

vh unit实际上是浏览器窗口高度的百分比。因此40vh表示窗口高度的40％。

vh units需要相对现代的浏览器才能正常运行。 IE9 +支持vh unit和所有其他常绿浏览器。

参考：dataTable Scroll - vertical, dynamic height

$(document).ready(function() {
  var table = $('#example').DataTable({
    scrollY: '40vh',
    paging: false
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$3,600</td>
      </tr>
      <tr>
        <td>Jenna Elliott</td>
        <td>Financial Controller</td>
        <td>Edinburgh</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$4,525</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$4,525</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$4,525</td>
      </tr>
    </tbody>
  </table>
</div>

无法在JQuery Datatable中滚动

1 个答案: