jqueryhtmlwebdatatables

How can I get overflow on y-axis with JQuery's DataTables?

Hello I am using DataTables for JQuery for my project. But right now, I am stuck on how to make it have overflow on y-axis with scroll.

This is what I have now, it seems okay in normal resolution.

enter image description here

This is what I have when I resize the table. Here lies the problem of DataTables table destroying other elements.

enter image description here

Here is my JS.

socket.on("sent_table_client", function (_received_data) {
  received_data_table_client = _received_data;
  $("#table_client_name").DataTable( {
      "paging"   : false,
      "searching": false,
      columns: [
          { data: "name"  , defaultContent: "None"},
          { data: "key_ir", defaultContent: "None"},
          { data: "dt"    , defaultContent: "None"}
      ],
      data: received_data_table_client
  });
});

Adding scrollY:"auto" here does not work either.

Here is my HTML.

<div style="flex:1;overfow-y:auto;"> <!-- `overfow-y:auto;` does not work. -->
  <table class="display" id="table_client_name" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>IR Key Code</th>
            <th>Latest Data Input</th>
        </tr>
    </thead>
  </table>
</div>

What is the solution for this problem?

Solution

  • I only said it was easy because i had solved this exact problem in an earlier project :p. At the time it wasn't easy.

    https://jsfiddle.net/g6woh19L/4/

    Get the height of the parent element, subtract the height of the datatables header/footer, and set the scrollY to the resulting value.

    function fillContainerHeight(api){
    var $scrollBody = $(api.table().body()).closest('div.dataTables_scrollBody');
    //reset height to calc new height, in case window was resized to be smaller
    $scrollBody.css({maxHeight:1,height:1})
    var container = $(api.table().container()).parent();
    var containerHeight = container.outerHeight(true);
    var headerHeight = $(api.table().header()).closest('div.dataTables_scrollHead').outerHeight(true);
    var footerHeight = $(api.table().footer()).closest('div.dataTables_scrollFoot').outerHeight(true);
    var scrollY = containerHeight - headerHeight - footerHeight;
    $scrollBody.css({maxHeight:scrollY,height:scrollY})
}

    You can call this function on window resize if you like.