y scrolling, pagination, ie and white space

y scrolling, pagination, ie and white space

rmzpfefrmzpfef Posts: 6Questions: 0Answers: 0
edited March 2012 in Bug reports
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

Replies

  • allanallan Posts: 63,152Questions: 1Answers: 10,405 Site admin
    Can you link me to a test page that shows the problem please?

    Thanks,
    Allan
  • rmzpfefrmzpfef Posts: 6Questions: 0Answers: 0
    that is kind of hard. the table is in a .net user control (.ascx) on a page in a asp.net web site has to be logged onto. unfortunately i cant give you access. let me think about how to do this. i will have to set up a simple html that has the table , the javascript and some hard coded data (normally it comes from a webmethod call on the aspx page). I will get back to you!
    thanks for the quick response.
  • rmzpfefrmzpfef Posts: 6Questions: 0Answers: 0
    Hi Allan,

    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
This discussion has been closed.