Problem with Repaint Datatables in IE 8
Problem with Repaint Datatables in IE 8
druibal
Posts: 1Questions: 0Answers: 0
Hi, we are having a lot of problems with IE 8 and the _fnScrollDraw function.
We use a single datatable but we load differents data in it with differents columns. All work fine in all browser except in IE 8.
We have modified the _fnScrollDraw to solve the fix. All the problems are with fields wich IE8 return null.
I paste my code here, perhaps someone can validated that it´s fine and upgrade these changes in the new version, thanks in advanced.
(i can only paste the change)
function _fnScrollDraw(o) {
.........
/*
* 1. Re-create the table inside the scrolling div
*/
/* Remove the old minimised thead and tfoot elements in the inner table */
$(o.nTable).children('thead, tfoot').remove();
/* Clone the current header and footer elements and then place it into the inner table */
if (o.nTHead !== null) {
nTheadSize = $(o.nTHead).clone()[0];
o.nTable.insertBefore(nTheadSize, o.nTable.childNodes[0]);
anHeadToSize = o.nTHead.getElementsByTagName('tr');
anHeadSizers = nTheadSize.getElementsByTagName('tr');
}
......
if (o.nTHead !== null) {
var nThs = _fnGetUniqueThs(o, nTheadSize);
for (i = 0, iLen = nThs.length; i < iLen; i++) {
iVis = _fnVisibleToColumnIndex(o, i);
if (iVis)
nThs[i].style.width = o.aoColumns[iVis].sWidth;
}
}
.....
if (o.oScroll.bCollapse && o.oScroll.sY !== "") {
if (o.nTHead !== null)
nScrollBody.style.height = (nScrollBody.offsetHeight + o.nTHead.offsetHeight) + "px";
else
nScrollBody.style.height = nScrollBody.offsetHeight + "px";
}
....
if (o.nTHead !== null) {
_fnApplyToChildren(zeroOut, anHeadSizers);
// Read all widths in next pass. Forces layout only once because we do not change
// any DOM properties.
_fnApplyToChildren(function (nSizer) {
aApplied.push(_fnStringToCss($(nSizer).width()));
}, anHeadSizers);
// Apply all widths in final pass. Invalidates layout only once because we do not
// read any DOM properties.
_fnApplyToChildren(function (nToSize, i) {
//DRG control porque da error
if (aApplied.length >= i && aApplied.length > 0)
nToSize.style.width = aApplied[i];
}, anHeadToSize);
$(anHeadSizers).height(0);
}
......
if (o.nTHead !== null) {
_fnApplyToChildren(function (nSizer, i) {
nSizer.innerHTML = "";
nSizer.style.width = aApplied[i];
}, anHeadSizers);
}
.......
else {
nScrollBody.style.width = _fnStringToCss('100%');
if (o.nTHead !== null) {
o.nScrollHead.style.width = _fnStringToCss('100%');
}
....
if (o.nScrollHead != null) {
nScrollHeadTable.style.width = _fnStringToCss(iOuterWidth);
nScrollHeadInner.style.width = _fnStringToCss(iOuterWidth);
}
....
var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll";
if (o.nScrollHead != null)
nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth + "px" : "0px";
}
We use a single datatable but we load differents data in it with differents columns. All work fine in all browser except in IE 8.
We have modified the _fnScrollDraw to solve the fix. All the problems are with fields wich IE8 return null.
I paste my code here, perhaps someone can validated that it´s fine and upgrade these changes in the new version, thanks in advanced.
(i can only paste the change)
function _fnScrollDraw(o) {
.........
/*
* 1. Re-create the table inside the scrolling div
*/
/* Remove the old minimised thead and tfoot elements in the inner table */
$(o.nTable).children('thead, tfoot').remove();
/* Clone the current header and footer elements and then place it into the inner table */
if (o.nTHead !== null) {
nTheadSize = $(o.nTHead).clone()[0];
o.nTable.insertBefore(nTheadSize, o.nTable.childNodes[0]);
anHeadToSize = o.nTHead.getElementsByTagName('tr');
anHeadSizers = nTheadSize.getElementsByTagName('tr');
}
......
if (o.nTHead !== null) {
var nThs = _fnGetUniqueThs(o, nTheadSize);
for (i = 0, iLen = nThs.length; i < iLen; i++) {
iVis = _fnVisibleToColumnIndex(o, i);
if (iVis)
nThs[i].style.width = o.aoColumns[iVis].sWidth;
}
}
.....
if (o.oScroll.bCollapse && o.oScroll.sY !== "") {
if (o.nTHead !== null)
nScrollBody.style.height = (nScrollBody.offsetHeight + o.nTHead.offsetHeight) + "px";
else
nScrollBody.style.height = nScrollBody.offsetHeight + "px";
}
....
if (o.nTHead !== null) {
_fnApplyToChildren(zeroOut, anHeadSizers);
// Read all widths in next pass. Forces layout only once because we do not change
// any DOM properties.
_fnApplyToChildren(function (nSizer) {
aApplied.push(_fnStringToCss($(nSizer).width()));
}, anHeadSizers);
// Apply all widths in final pass. Invalidates layout only once because we do not
// read any DOM properties.
_fnApplyToChildren(function (nToSize, i) {
//DRG control porque da error
if (aApplied.length >= i && aApplied.length > 0)
nToSize.style.width = aApplied[i];
}, anHeadToSize);
$(anHeadSizers).height(0);
}
......
if (o.nTHead !== null) {
_fnApplyToChildren(function (nSizer, i) {
nSizer.innerHTML = "";
nSizer.style.width = aApplied[i];
}, anHeadSizers);
}
.......
else {
nScrollBody.style.width = _fnStringToCss('100%');
if (o.nTHead !== null) {
o.nScrollHead.style.width = _fnStringToCss('100%');
}
....
if (o.nScrollHead != null) {
nScrollHeadTable.style.width = _fnStringToCss(iOuterWidth);
nScrollHeadInner.style.width = _fnStringToCss(iOuterWidth);
}
....
var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll";
if (o.nScrollHead != null)
nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth + "px" : "0px";
}
This discussion has been closed.