DataTable 1.9.2 width issue during pagination when fluid layout is used in IE (except IE 7)and FF

Mehul

Hi,

I was facing rendering issue when I click on number or other button in pagination, it was assigning width to 100% to various elements of datatable, which was forcing div to shrink its contents and based on contents in body and header, the header and body columns no longer remain aligned and of same width, but IE 7 does not show this behavior.

Also, there is a issue in IE9, where if number button is clicked on pagination, it does not change height of div element.

I want to describe solution here as it may be helpful to others.
[code]
var table_width;
$(".dataTable").bind('page',function () {
table_width = $(".dataTables_scrollBody table").width();
}).dataTable({
"bUI" : true,
"sPaginationType" : "full_numbers",
"bPaginate" : true,
"bLengthChange" : true,
"bFilter" : true,
"bSort" : false,
"aaSorting" : [],
"bInfo" : true,
"bAutoWidth" : true,
"sScrollX" : "100%",
"sScrollXInner" : "",
"bProcessing" : true,
"bScrollCollapse" : true,
"iDisplayLength" : 10,
"fnDrawCallback":function (oSettings) {
if (!($.browser.msie && $.browser.version == "7.0")) {
$(".dataTables_scrollHead").width(table_width);
$(".dataTables_scrollBody").width(table_width);
$(".dataTables_scrollHeadInner").width(table_width);
$(".dataTables_scrollHeadInner table").width(table_width);
$(".dataTables_scrollBody").width(table_width);
}
// fix for IE9 height issue
if ($.browser.msie && $.browser.version == "9.0") {
$(".dataTables_scroll").height($(".dataTables_scrollHead").height() + $(".dataTables_scrollBody").height() + 30);
}
}
});
[/code]
If somebody has better solution, please provide your inputs here.

Thanks,
Mehul Patel

Mehul

I was using FF 14.0.1 and it has horizontal scroll bar issue i.e. even though overflow: scroll, overflow-x:scroll is applied it shows scroll bar in disable mode without scrolling. I am using YUI-3 grid for fluid layout.

Mehul

This is updated code as above code was still not properly layout datatable. I am using doublescrollbar plugin to have double horizontal bar with datatable as I have large table.
[code]
var fnDrawCallback = function (oSettings) {

// called after processing is done by plug in
if (!($.browser.msie && $.browser.version == "7.0" && $.browser.opera)) {
$(".dataTables_scrollHead").width(table_width);
$(".dataTables_scrollHeadInner").width(table_width);
$(".dataTables_scrollHeadInner table").width(table_width);
if (!($.browser.msie && parseInt($.browser.version.slice(0,1)) > 8)) {
$(".dataTables_scroll").width("100%");
}
}

if($.browser.msie || $.browser.mozilla) {
// not for chrome, opera, safari
if (!($.browser.msie && $.browser.version == "7.0")) {
$(".dataTables_scrollBody").width(table_width);
}
// end
} else {
// for chrome, opera, safari
$(".dataTables_scroll").css("overflow-x", "hidden");
// end
}

if ($.browser.msie && $.browser.version == "9.0") {
$(".dataTables_scroll").each(function(index){
$(this).height($(".dataTables_scrollHead:eq(" +index +")").height() + $(".dataTables_scrollBody:eq(" +index +")").height() + 30);
});
}
}

[/code]

Mehul

Still it has layout issue when default page length is set to 100 and after loading, if it is changed back to 10. Can anybody provide me their valuable suggestions?

Mehul

I have managed to find work around for above issue as well as sort, paginate, filter by adding code in draw (for length change), sort and filter events.

[code]
$(table).bind('page', function () {
if (($.browser.msie && $.browser.version != "7.0") || $.browser.mozilla) {
// called before page length processing is done by plug in
table_width = $(".dataTables_scrollBody table").width();
}
});

$(table).bind('draw', function () {
if (($.browser.msie && $.browser.version != "7.0") || $.browser.mozilla) {
// called before pagination processing is done by plug in
table_width = $(".dataTables_scrollBody table").width();
}
});

$(table).bind('sort', function () {
if ($.browser.msie) {
if (table_width != undefined)
// called before pagination processing is done by plug in
table_width = $(".dataTables_scrollBody table").width();
}
});

$(table).bind('filter', function () {
if ($.browser.msie) {
if (table_width != undefined)
// called before pagination processing is done by plug in
table_width = $(".dataTables_scrollBody table").width();
}
});
[/code]

I hope this may be helpful to others.