JQuery Datatables misalignment in tabs with fixed columns

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.

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%',
        "order": [[2, "asc"]],
         dom: "Cfrtip",
         scrollY: "140px",
         scrollX: "100%",
         paging: false,
         scrollCollapse: true,
         "fnInitComplete": function () 
         "fnDrawCallback" : function(oSettings)
        "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! 

Popular Posts