How to dynamically change the height of scrollY depending on viewport size?

price88

Hello,

I am very new to DataTables so apologies if a silly question / if it is in the wrong place...

I have created a single-page application with table that is being populated dynamically with data obtained through AJAX / PHP interaction with a MySQL database:

JS:

$('#mainTable').DataTable({
                    dom: 'Bflrtip',
                    buttons: [{
                        text: '+ Add',
                        action: function (e, dt, node, config) {

                            $.ajax({
                                url: "libs/php/getDepartments.php",
                                type: 'GET',
                                dataType: 'json',
                                success: function (result) {
                                    if (result.status.name == "ok") {
                                        $.each(result.data, i => {
                                            $('#addDepartment').append($("<option>", {
                                                text: result.data[i].name,
                                                value: result.data[i].id
                                            }));
                                        });
                                    };
                                },
                                error: function (error) {
                                    console.log(error);
                                }
                            });
                        }
                    }],
                    columnDefs: [{
                        orderable: false,
                        targets: [-1, -2]
                    }],
                    "scrollY": "55vh",
                    "paging": false,
                    "info": false,
                });

HTML:

<div class="container">
      <div class="mx-auto bg-white rounded shadow">
        <div class="table-responsive">
          <table class="table table-fixed" id="mainTable" style="width:100%">
            <thead class="thead-light">
              <tr>
                <th scope="col" id="departmentCol">Department</th>
                <th scope="col" id="locationCol">Location</th>
              </tr>
            </thead>
            <tbody id="mainData">
            </tbody>
          </table>
        </div>
      </div>
    </div>

At the moment the scrollY is set to 55vh which works OK on many viewports however some have a large amount of unwanted space at the bottom of the table where it cuts off, and on larger screens a scrollbar appears in the parent container which again is not desirable.

I was therefore wondering if there is a way to dynamically change the height of scrollY depending on the viewport size, so that it always fits the right height for that particular container? I have researched other forum posts and tried setting scrollY to the result of subtracting the container height from the table height etc but can't seem to get it to work smoothly across all devices. Hoping that there is a straightforward equation that I haven't managed to find?

I hope this is clear and any help is very much appreciated. Thank you

colin

I can't think of a straightforward equation, but I suspect it's just what you're saying - using the container height and doing sums on the expected data. As it's a configuration option, you'll need to do the sums before the table is initialised, as it can't be changed afterwards.

Colin

price88

Many thanks Colin. I created the variable:

$scrollHeight = $('#mainTable').height() + $('.container').height() - $('#mainData').height();

before the table is initialised, and have set $scrollHeight as the value for scrollY in the table initialisation (replacing 55vh).

However the scrollbar height is now a little too large and is causing the parent container to scroll along with the table which is not ideal. I suspect this could be because other table elements may need to be subtracted - such as scroll head, filter etc? And if so, how is it possible to grab these variables to use in the calculation when the calculation needs to happen before the table is initialised? Or could I be missing something else?

Hope that makes sense and thanks again for your help!

colin

I think we're going to need to see this one - CSS is always fiddly without being able to debug it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

price88

Thanks Colin - please see http://live.datatables.net/norujubi/1/edit?html,css,js,console,output

I've added more code which I hope will give you a better idea of what I'm trying to achieve.

You can't see the data in the table as this is being dynamically populated through PHP / MySQL but there are currently 100 entries in there. The datatable functionality also doesn't seem to be appearing in the test case (not sure whether it should be able to?) but for me the table head looks like the below:

Please let me know if you need anything else and thanks so much again.

kthorngren

You are getting this error:

GET http://live.datatables.net/libs/js/jquery-2.2.3.min.js net::ERR_ABORTED 404 (Not Found)

After fixing that you are getting this error:

GET http://live.datatables.net/libs/php/getAll.php 404 (Not Found)

Instead of making an Ajax request maybe you can simulate the data using Javascript sourced data, like this example.

Here is the updated example with jquery.js being loaded.
http://live.datatables.net/norujubi/2/edit

Kevin

price88

Thank you Kevin - I've updated the link http://live.datatables.net/norujubi/3/edit For some reason the scroll head is not formatted very well in the live version but it appears fine on mine. The main problem is that there is a scroll bar on the container div and the scroll within the table is too long.

Thanks again

allan

Thanks for the test case - the issue is that you aren't taking into account the various elements that DataTables adds around the table - for example the search box has height.

Have you seen this blog post which presents a plug-in to do what you are looking to do.

Allan

price88

Allan - that is great thank you! I wish I had come across that plug-in earlier... it all works fine now.

Thanks all!