dataTable no scrollbar initially

pgorbas

Please see the full issue with code and screenshots at Stack Overflow

https://stackoverflow.com/questions/47063834/jquery-datatables-with-scrollx-true-initially-does-not-render-columns

What do I need to do so my dataTable gets rendered with the horizontal scroll bar from , "scrollX": true initially - without having the user doing something to force the dataTable to re-render?

pgorbas

I am noticing that in the statement $('#data-table-pendingList').DataTable().columns.adjust(); "columns" is undefined, and in fact the api call to <dataTable<.columns() is reporting that columns() is not a function.

https://datatables.net/reference/api/columns()

allan

$('#data-table-pendingList').DataTable().columns.adjust();

That should work. Could you link to a test case showing the issue please.

Allan

pgorbas

Yes, I have tried that exact same statement
$('#data-table-pending List').DataTable().columns.adjust();
several times, both when the table gets created and also on the on Init call, but the columns refuse to expand.

My on init call ( which gets run and completes before I call set the data into the table) :

$('#data-table-pendingList').on('init.dt', function () {
   $('#data-table-pendingList').DataTable().columns.adjust();
}

BTW, the onInit call seems to have issues as well. That even is getting fired as soon as the page template is loaded and does not wait for the api call to get the data has completed and set the data.

My method to get data and set it into dataTable :

    GetPendingOrdersList();

    function GetPendingOrdersList() {
        var url = API_URL + "stateRegistration/getPendingOrders";
        $http({
            method: 'POST',
            url: url,
            data: {
                PersonId: JSON.parse(sessionStorage.getItem('UserProfile')).Id
            }
        })
            .then(function (res) {
                $scope.OrderItems = res.data
            }, function (err) {
                $.gritter.removeAll();
                setTimeout(function () {
                    $.gritter.add({
                        title: 'Error: Could not retrieve Pending Orders',
                        text: err.data.message,
                        sticky: false,
                        time: '5000',
                        class_name: 'my-sticky-class'
                    });
                }, 1000);
            });
    }

The observed course of events is:
1) function GetPendingOrdersList() starts, make API data call
2) DataTables onInit callback starts and ends
3) other work is done
4) API call from step 1, GetPendingOrdersList() , returns data and it is set into the dataTable
5) DataTables onInit callback starts and ends Again
6) Page completes rendering but the DataTable hass all columns hidden and the (single) data item appears under the first column header ( only) with a "+" button which will expand to show all the columns of data.
7) have to do a toggle full screen or resize viewport to get columns to expand.

If you had bother to follow the link I posted to the issue on Stack Overflow, where I have the ability to upload and display screen shots, you would have had read I was already calling the statement
$('#data-table-pending List').DataTable().columns.adjust();
but it was failing.

pgorbas

Allen, you asked "Could you link to a test case showing the issue please."

I have no idea how to set up a "Test case" ?

allan

Details are provided here on how you can use free services to create a test case if you can't link to your page.

If you had bother to follow the link I posted to the issue on Stack Overflow, where I have the ability to upload and display screen shots

With respect, I did. As I noted it "should work". I don't know why it isn't, which is why I asked for a test case I could debug, so I could try to provide some help.

Allan