Unable to scroll in JQuery Datatable

Question

I'm unable to show a vertical scroll in my datatable. My HTML structure is as follows:

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

And my jQuery is :

  $('#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
  })

I'm unsure as to why the table is not scrollable on either axes. What can I do to fix this?

Prashant Pokhriyal · Accepted Answer · 2019-07-03 05:12:34Z

There is no way to use a percentage height for scrollY. Percentage height doesn't work well in CSS. However, you can use vh units: scrollY: '50vh', which works well.

The vh unit is effectively a percentage of the browser window height. So the 40vh means 40% of the window height.

A relatively modern browser is required for vh units to operate correctly. IE9+ supports the vh unit and all other evergreen browsers.

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

Collectives™ on Stack Overflow

Unable to scroll in JQuery Datatable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related