Why Datatable header and footer not getting properly displayed initially?

I have configured datatable as below:

function BindDataTable(targetGrid) {
        var sortableGrid = $(targetGrid).attr('id');
        var DT = $('#' + sortableGrid).dataTable({
            "fnInitComplete": function () {
                $('#' + sortableGrid + ' thead > tr').removeClass().addClass("HeaderGridView2").css('cursor', 'pointer');
                $('#' + sortableGrid + ' tfoot > tr').removeClass().addClass("FooterGridView2");
            },
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            scrollY: '500px',
            "bInfo": false,
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "asStripClasses": null, //To remove "odd"/"event" zebra classes
            "fnDrawCallback": function () {
                $('#' + sortableGrid + ' tr').removeClass();
                $('#' + sortableGrid + ' tr:even').addClass("RowGridView2 even");
                $('#' + sortableGrid + ' tr:odd').addClass("AlternatingRowGridView2 odd");
                $('#' + sortableGrid + ' thead > tr').removeClass().addClass("HeaderGridView2").css('cursor', 'pointer');
                $('#' + sortableGrid + ' tfoot > tr').removeClass().addClass("FooterGridView2");
            }
        });

    }

But when the datatable gets binded and displayed first time it does not gets display properly as header and footer not set as per column width. After click on any column to sort table it gets displayed as expected with property header and footer as in below screen. Why does this happens?