Jquery datatables fixed columns issue in IE 9

Question

I am using jquery ui tabs to display two grids side by side within same div. Grid are displayed using jquery datatables plugin. Recently i have added the feature of fixed columns in both of my grids, that makes IE 9 behave weirdly at random.
This behavior happen at total random but on one of the two grids not on both. IE 9 display fixed column portion over the horizontal scroll-bar. It looks like below:



Other grid display just fine like below:

Funny thing is if you sort out the affected table or enter some characters in search textbox, this overlapping portion got fixed automatically.
I search on it and came to know that draw() function is called on these actions so i tried to call this function manually on tab selection event but that didn't solve the problem.
Below is the JS code for tab selection event:

$('#divEAMountDismountGridsTabs, #CurrentSpec').tabs(
    {
        select: function(event, ui)
        {
            // Do stuff here
            var tempDismount = $('#tblDismountAtt').DataTable();
            tempDismount.draw(false);

            var tempCurrentSpec = $('#tblCurrentSpec1').DataTable();
            tempCurrentSpec.draw(false);
        }
    });

Below is the JS i write on datatable initialization(both grids got the same attributes so i am just copying the initialization of first grid).

/*DataTable Implementation*/
    var tableDismountAtt = $('#tblDismountAtt').dataTable(
    {
        "bFilter": true,
        "bInfo": false,
        "bDestroy": true,
        "bwidth": '100%',
        //"sDom": '<"top"f>',
        'iDisplayLength':5000,
        "order": [[2, "asc"]],
         dom: "Cfrtip",
         scrollY: "140px",
         scrollX: "100%",
         paging: false,
         scrollCollapse: true,
        "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 ]}
                    ]

    });
    /*Freezing Dismount Attachment Columns*/       
    new $.fn.dataTable.FixedColumns( tableDismountAtt, {leftColumns: 6, heightMatch: 'auto'});

Answer 1

Cause of the problem was initialization of second grid was occuring when it was hidden, as a result when it became visible, alignment of controls got disturbed. This thing also mentioned on JQuery Datatables official site. You can read all the details from here.

To avoid this situation you need to call AdjustColumns function whenever the grid shows/drawn.

I have called this function two times:

1. When datatable initializes
2. When draw function called on grid

(At first i only called this function on initialization, but when i tried to filter records using its smart search, alignment was getting disturbed again.)

Below are the changes i have made to my datatable initialization code that is working fine now.

/*DataTable Implementation*/
    var tableDismountAtt = $('#tblDismountAtt').dataTable(
    {
        "bFilter": true,
        "bInfo": false,
        "bDestroy": true,
        "bwidth": '100%',
        //"sDom": '<"top"f>',
        '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 ]}
                    ]

    });

Note:

1. fnAdjustColumnSizing(true) => Adjust column size for all grids/datatables either they are visible or hidden.

2. fnAdjustColumnSizing(false) => Adjust column size for only grids/datatables those are visible.