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.
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!
Comments
Post a Comment