CODEWITHSUNDEEP
jquerycssscrolldatatables
ashok19r91d
ashok19r91d

Reputation: 494

Datatables.net ScrollX | Header and Data column width issues

I'm trying to create wrapper for datatables.net table component, which create and enable features datatables based on classes defined in table.

$('table.data-table').each(function() { 
    var props = {};
    if ($(this).hasClass('select') && $(this).hasClass('multi'))
        props.select = 'multi';
    else if ($(this).hasClass('select')
        props.select = 'single';
    if ($(this).hasClass('long-table')
        props.scrollX = true;
    ...
    ...
    ...
    $(this).DataTable(props);
});

Like you see above based on classes defined in table DataTable's features enabled for all HTML tables.

Test Case 1: Table should fill it's container.

Test case 2: Scrolling should not create misalignment.

Here my issues is, If I set scrollX: true Testcase 1 fails and Test case 2 success.enter image description here

If I ignore scrollX: true Testcase 1 success and Test case 2 fails. enter image description here What will be possible solution to make both text cases success. I've already tried to set scrollX: '100%' and nothing got good results.

I don't wish to go with solution stating add long-grid class only to second grid and it automatically ignores scrollX:true on first grid. Because we know how many number of columns are there in table but not the length of string present in data and the screen size where the page rendered, this is for responsive application.

Any solution or CSS hacks are welcome.

Upvotes: 8

Views: 7702

Answers (4)

zax
zax

Reputation: 946

I ran into this issue, and came up with a perfect solution.

Set scrollX to true, but only for viewport widths that are insufficient to display all of the columns. On window resizing, destroy and recreate the table as necessary at this one exact breakpoint to do this. You will get the desired behavior when you do this.

var scrollX;
var oldScrollX;

$(document).ready(function ($) {
    var toggleScroll = function () {
        try {
            scrollX = $('.dataTables_scrollBody')[0].offsetWidth < $('.dataTables_scrollBody')[0].scrollWidth;
        } catch {
            // First page load.  Avoid an error before table constucted.
            scrollX = document.body.clientWidth < 1000;
        }
        if (scrollX != oldScrollX) {

            const dtOpts = {
                "scrollX": scrollX,
                order: [],
                destroy: true
            }
            // Create or recreate your DataTable
            new DataTable('#myTable', dtOpts);
        }
    };
    // Change ScrollX setting when the window is resized, *if necessary*
    $(window).resize(function () {
        toggleScroll();
    });

    // Fire when the page first loads
    toggleScroll();
});

Upvotes: 0

Dmytro__Chas
Dmytro__Chas

Reputation: 1

I had a similar problem, I was getting json data but the user could also upload others. And at this moment I had a problem that after the user requested new data, the width of the table header and the width of the table body became different. I solved this problem by removing (scrollX: true) and leaving (scrollY : "200px") - I needed a fixed height. It was all in a wrapper and that's why it worked for me

Upvotes: 0

Eduardo Conte
Eduardo Conte

Reputation: 1203

Forget about scrollX, use the solution proposed on this question:

Header columns misaligned with DataTable when scrollX is enabled

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Upvotes: 15

amuller
amuller

Reputation: 146

I dont know about misalignment, but using scrollX: true makes the table not fill its container. To avoid this, set style="width:100%" in your table Datatables Flexible table width

Another solution is wrapping your .table in .table-responsive Bootstrap Responsive tables

I hope this helps someone.

Upvotes: 4

Related Questions