No data available in table not at the center

lykadoodles

The default "No data available in table" when datatable is empty is on the first column of the table rather than the center.
But when i click its header the default "No data available in table" renders properly on the center.

Initialisation of table code:

ftable = $('#tblFailed').DataTable({
            "responsive": true,
            "order": [[1, "desc"]],
            "bPaginate": false,
            'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta) {
                    return '<input style="text-align:center" type="checkbox">';
                },

            }],
            'select': {
                'style': 'os',
            },
            'rowCallback': function (row, data, dataIndex) {
                // Get row ID
                var rowId = data[0];
                // If row ID is in the list of selected row IDs
                if ($.inArray(rowId, frows_selected) !== -1) {
                    $(row).find('input[type="checkbox"]').prop('checked', true);
                    $(row).addClass('selected');
                }
            }
            
        });

ult.nrg

I had a similar problem, as I was hiding the div around the table and only showing it once the datatable was rendered. Problem only occurs with responsive.

Not a pretty fix, but I just wrapped the initialization of the datatable call in a 100ms settimeout function and it seems to have fixed it. I read on another post it's because DT cannot get the full width of the area if the DT is hidden. I also added this in once the DT is created and everything is showing:

        setTimeout(
          function () {
              $.fn.dataTable.tables({ visible: true, api: true })
            .columns.adjust()
            .responsive.recalc();
          }, 100);