Header width Alignment issues after Ajax call/Column render

cf21

Hi all,
I am having an issue where the header of one of my columns is not aligning correctly after the data within the column is being rendered. I am passing a function that returns the object to be rendered to the column definitions and the data is being populated via an ajax call. I have tried calling a currentTable.columns.adjust().draw() in the InitComplete but the colum ndata isn't being rendered until after that InitComplete is finished. The table redraws/aligns fine afterwards if I let everything load and then redraw using a button to refresh the table. Is there a way to call the redraw or adjust function after the Ajax call and the columnDef render functions complete?

currentTable = $(divName).DataTable({
ajax: {
"url": ajaxURL,
"type": 'POST',
"contentType": "application/json; charset=utf-8",
"data": function (d) {
return JSON.stringify(param);
}
},
order: orderInit,
columnDefs: colDef,
scrollY: "auto",
scrollX: true,
scrollCollapse: true,
autoWidth: true,
//select: true,
language: {
processing: "<img class='GridviewLoadingGif' /> Building...",
loadingRecords: "<img class='GridviewLoadingGif' /> Please wait - loading..."
},
buttons: buttonDef,
initComplete: function () {
dashboard.DataTableUtil.tables[ divName ] = currentTable;
$(currentTable.buttons().container()).removeClass("btn-group").appendTo($('.col-md-6:eq(0)', currentTable.table().container()));
currentTable.columns.adjust().draw();
}
});

colDef.push({
name: "Actions", title: "Actions", data: null, targets: 0, searchable: false, orderable: false,
className: "text-nowrap",
defaultContent: "",
render: function (data, type, row, full) {
if ($('#ActionButtonType_' + tableID).val() != 'undefined')
return CreateActionButtonDefinition($('#ActionButtonType_' + tableID).val(), tableID, full.row);
else
return CreateActionButtonDefinition("Edit_Delete_Buttons", tableID, full.row);
}
});

kthorngren

The first thing I would do is make sure you have the correct Datatables styling integration files for the style framework you are using. Looks like you might be using Bootstrap. Make sure you have the files for the BS version you are using. Use the Download Builder builder for this.

in the InitComplete but the colum ndata isn't being rendered until after that InitComplete is finished

From the initComplete docs:

this callback is provided to let you know when the data is fully loaded.

then redraw using a button to refresh the table. Is there a way to call the redraw or adjust function after the Ajax call and the columnDef render functions complete?

Are you using ajax.reload() or another function to refresh the table?

You should not need to use columns.adjust() unless the table is hidden when loaded then displayed after.

Can you post a link to your page or a test case replicating the issue so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin