y scrolling, pagination, ie and white space
y scrolling, pagination, ie and white space
rmzpfef
Posts: 6Questions: 0Answers: 0
Hi,
I am using datatable on a table(obvious I guess or I wouldn't here). it has pagination enabled and a y scroll size (I will insert setup params below).
The initial page length is 20 and the scroll y is 360 (just fits without a scroll bar). If the user changes the page length to a shorter value, say 10, then it leaves a white space between last row and bottom of scroll area. That is fine and good. However If the user then changes the page length to 50, which is larger than the scroll area will fit, then it shows the table with the scroll bar and a large area of white space between the headers and the table body!
It works fine in chrome, firefox and safari.
Using ie developer tools I find the the div with .dataTables_scrollBody has a position of top: 154. the .dataTables_scrollHead has a height of 32 and a position of top: 31.
Here is the datatable call:
[code]
dataTableObject = jQuery('#' + dataViewTableSelector).dataTable({
bJQueryUI: true,
bDestroy: true,
bInfo: true,
bProcessing: true,
bStateSave: true,
sPaginationType: "full_numbers",
aLengthMenu: [[5, 10, 15, 20, 50, -1], [5, 10, 15, 20, 50, "All"]],
iDisplayLength: 20,
aaData: data.documents,
aaSorting: [[1, 'asc']],
sCookiePrefix: "ver_014",
bProcessing: true,
sScrollX: '100%',
sScrollY: "360px",
oLanguage: { sEmptyTable: "No Available " + dataViewName + "s" },
aoColumnDefs: { aTargets: ["" + dataViewName + "MoreInfo"], sWidth: "20px", mDataProp: null, bSortable: false, bUseRendered: false,
fnRender: function (oObj) {
return "" +
"" +
"(View)"
//"";
}
},
{ aTargets: ["" + dataViewName + "SystemID"], sWidth: "2%", mDataProp: "seqid", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.seqid + "";
}
},
{ aTargets: ["" + dataViewName + "School"], sWidth: "35%", mDataProp: "name_long", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.name_long + "";
}
},
{ aTargets: ["" + dataViewName + "Name"], sWidth: "42%", mDataProp: "name" },
{ aTargets: ["" + dataViewName + "Whom"], sWidth: "7%", mDataProp: "created_by", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.created_by + "";
}
},
{ aTargets: ["" + dataViewName + "LastModified"], sWidth: "3%", mDataProp: "last_modified" },
{ aTargets: ["" + dataViewName + "Viewed"], sWidth: "3%", mDataProp: "date_successfully_viewed" },
{ aTargets: ["" + dataViewName + "Category"], sWidth: "6%", mDataProp: "category" },
{ aTargets: ["_all"]
/* , fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
//jQuery(nTd).css({ 'padding-top': '0px', 'padding-bottom': '0px' });
} */
},
{ aTargets: [dataViewName + "Delete"], sWidth: "10px", mDataProp: null, bSortable: false,
fnRender: function (oObj) {
var rolelevel;
if (typeof jQuery(this.nTh).attr('rolelevel') === "undefined") {
rolelevel = 1.5;
} else {
rolelevel = Number(jQuery(this.nTh).attr('rolelevel'));
if (rolelevel === NaN)
rolelevel = 1.5;
};
if (data.roleLevel >= rolelevel) {
return "Delete";
} else {
return "";
}
}
}
]
[/code]
Here is the base table on the page before datatable:
[code]
System ID
School
Name
<%= CType(IIf(ShowModifiedBy, "Modified", "Created"), String)%> By
Modified
Viewed
Category
[/code]
Thanks, Bob
I am using datatable on a table(obvious I guess or I wouldn't here). it has pagination enabled and a y scroll size (I will insert setup params below).
The initial page length is 20 and the scroll y is 360 (just fits without a scroll bar). If the user changes the page length to a shorter value, say 10, then it leaves a white space between last row and bottom of scroll area. That is fine and good. However If the user then changes the page length to 50, which is larger than the scroll area will fit, then it shows the table with the scroll bar and a large area of white space between the headers and the table body!
It works fine in chrome, firefox and safari.
Using ie developer tools I find the the div with .dataTables_scrollBody has a position of top: 154. the .dataTables_scrollHead has a height of 32 and a position of top: 31.
Here is the datatable call:
[code]
dataTableObject = jQuery('#' + dataViewTableSelector).dataTable({
bJQueryUI: true,
bDestroy: true,
bInfo: true,
bProcessing: true,
bStateSave: true,
sPaginationType: "full_numbers",
aLengthMenu: [[5, 10, 15, 20, 50, -1], [5, 10, 15, 20, 50, "All"]],
iDisplayLength: 20,
aaData: data.documents,
aaSorting: [[1, 'asc']],
sCookiePrefix: "ver_014",
bProcessing: true,
sScrollX: '100%',
sScrollY: "360px",
oLanguage: { sEmptyTable: "No Available " + dataViewName + "s" },
aoColumnDefs: { aTargets: ["" + dataViewName + "MoreInfo"], sWidth: "20px", mDataProp: null, bSortable: false, bUseRendered: false,
fnRender: function (oObj) {
return "" +
"" +
"(View)"
//"";
}
},
{ aTargets: ["" + dataViewName + "SystemID"], sWidth: "2%", mDataProp: "seqid", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.seqid + "";
}
},
{ aTargets: ["" + dataViewName + "School"], sWidth: "35%", mDataProp: "name_long", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.name_long + "";
}
},
{ aTargets: ["" + dataViewName + "Name"], sWidth: "42%", mDataProp: "name" },
{ aTargets: ["" + dataViewName + "Whom"], sWidth: "7%", mDataProp: "created_by", bUseRendered: false,
fnRender: function (oObj) {
return "" + oObj.aData.created_by + "";
}
},
{ aTargets: ["" + dataViewName + "LastModified"], sWidth: "3%", mDataProp: "last_modified" },
{ aTargets: ["" + dataViewName + "Viewed"], sWidth: "3%", mDataProp: "date_successfully_viewed" },
{ aTargets: ["" + dataViewName + "Category"], sWidth: "6%", mDataProp: "category" },
{ aTargets: ["_all"]
/* , fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
//jQuery(nTd).css({ 'padding-top': '0px', 'padding-bottom': '0px' });
} */
},
{ aTargets: [dataViewName + "Delete"], sWidth: "10px", mDataProp: null, bSortable: false,
fnRender: function (oObj) {
var rolelevel;
if (typeof jQuery(this.nTh).attr('rolelevel') === "undefined") {
rolelevel = 1.5;
} else {
rolelevel = Number(jQuery(this.nTh).attr('rolelevel'));
if (rolelevel === NaN)
rolelevel = 1.5;
};
if (data.roleLevel >= rolelevel) {
return "Delete";
} else {
return "";
}
}
}
]
[/code]
Here is the base table on the page before datatable:
[code]
System ID
School
Name
<%= CType(IIf(ShowModifiedBy, "Modified", "Created"), String)%> By
Modified
Viewed
Category
[/code]
Thanks, Bob
This discussion has been closed.
Replies
Thanks,
Allan
thanks for the quick response.
By the way great work on this plugin.
I have discovered that the problem will happens if the browser (ie8) is in quirks mode or ie7 compat mode. I have to assume it will be a problem to my customers (this problem was pointed at to me by our help desk).
Here is a page that you can use: https://idservdev.scholarchip.com/dttest/dttest.htm
none of the links on the page do anything they just give a 404.
If you view it in quirks or ie7 mode it has the problem. In ie8 compat mode it works fine.
I am assuming anyone using an older version of ie would have the problem, but I could be wrong.
Regards,
Bob