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);
}
});