JQuery Datatables misalignment in tabs with fixed columns

Problem:
I am working with jQuery datatables for quite some time and i began to think it was bug free until i came across the misalignment issue.
I was using jQuery datatables with jQuery UI Tabs, so only first datatable was shown when the screen loads, and first grid was displayed just fine. However when i view the second datatable, it shows header  misalignment issues. I tried may workarounds but those only change the problems like if rows misalignment is fixed then header row height gets smaller etc.
After spending a lot of time in searching, i found the cause of the problem and it was mentioned on jQuery datatables official site here.
It is mentioned that if a datatable is initialized while it is not visible, browser will not be able to calculate the height and width of table.
You can also view the question i have posted on StackOverflow for this problem here. I have posted images of problem there, that will help you understand it.

Solution:
In order to avoid this situation, you need to call the api method AdjustColumns on appropriate events. You can call it on Show event as i have seen many answers on StackOverflow recommending that. At start i call this method only when datatable initializes,  it resolve the alignment issue when you view both of the tables but when i tried to filter rows using its smart search then hidden table alignment gets disturbed again, as Draw event is fired when you search records in jQuery datatables so i add this method on DrawCallback as well.

Below is the initialization code of my datatable that is working fine now.

/*DataTable Implementation*/
    var tableDismountAtt = $('#tblDismountAtt').dataTable(
    {
        "bFilter": true,
        "bInfo": false,
        "bDestroy": true,
        "bwidth": '100%',
        'iDisplayLength':5000,
        "order": [[2, "asc"]],
         dom: "Cfrtip",
         scrollY: "140px",
         scrollX: "100%",
         paging: false,
         scrollCollapse: true,
         "fnInitComplete": function () 
         {
            this.fnAdjustColumnSizing(true);
         },
         "fnDrawCallback" : function(oSettings)
         {
            this.fnAdjustColumnSizing(false);
         },
        "aoColumnDefs" : [
                        {'bSortable' : false, 'aTargets' : [ 0 ] , "width": "80px"}, //Switch to Dismount
                        {'bSortable' : false, 'aTargets' : [ 1 ], "width": "80px"}, //Parts Status
                        {'bSortable' : true, 'aTargets' : [ 2 ], "width": "80px"}, //Sales Code
                        {'bSortable' : true, 'aTargets' : [ 3 ] , "width": "60px"}, //Price
                        {'bSortable' : false, 'aTargets' : [ 4 ], "width": "60px"}, //Currency
                        {'bSortable' : true, 'aTargets' : [ 5 ], "width": "150px"}, //Sales Code Description
                        {'bSortable' : false, 'aTargets' : [ 6 ], "width": "80px"}, //Quantity
                        {'bSortable' : false, 'aTargets' : [ 7 ], "width": "380px"}, //Remarks
                        {'bSortable' : true, 'aTargets' : [ 8 ], "width": "80px"}, //    PSO Ref No.
                        {'bSortable' : false, 'aTargets' : [ 9 ], "width": "150px"}, //Model Sub Name
                        {'bSortable' : false, 'aTargets' : [ 10 ] , "width": "80px"}, //Value
                        {'bSortable' : false, 'aTargets' : [ 11 ], "width": "150px"}, //Date
                        {'bSortable' : true, 'aTargets' : [ 12 ]},
                        {'bSortable' : true, 'aTargets' : [ 13 ]},
                        {'bSortable' : true, 'aTargets' : [ 14 ]}
                    ]

    });

In case of any query please comment and i will respond to it.

Happy coding!