Scroller row counting issues

prubin

Allan,

You have dome some remarkable work here, I have been able to integrate you work into mine and produce a very powerful generic display of an assortment of data.

Unfortunately, scroller continues to be a bit of an issue cosmetically.

I understand that scroller requires that every line be one line of text or it messes up the math to show x to y of z. I have multiple tables where the count gets off even when there is no row that is more than 1 line high.

As far as I can tell what is happening is that the measurement is off by a few pixels on every line. I am trying to work through the scroller code to narrow it down. The table I am looking at as an example displays 3344 to 2906 of 2906 entries when scrolled to the bottom and shows 8.75 rows at the top when it says 1 to 10 of 2906 entries. I have checked that the table has cellpadding 0 and cellspacing 0.

I also looking to see if there is some efficient way we could remember row heights as we scroll so as to make it self correcting when there is a row that renders high.

Can you make any recommendations on where I might focus my attention?

Thanks.

prubin

I tried to use the debugger... in Firefox I am still waiting for it to finish 1.5 hours later. It is still saying uploading to the server. I tried Chrome and the popup still says uploading to the server the status at the bottom showed uploading x% all the way to 100% but it never finished and gave me the code. Note it took about 20 seconds to get to 100%

allan

Wow - you must have a lot of data in the table - I suppose that makes sense with the use of Scroller.

You are absolutely correct - a pixel out in the row height calculation would destroy the Scroller calculations. Might you be able to give a link (PM me by clicking on my name in the forum and picking "Send message" if you like) so I can take a look and see what might be upsettings Scroller's calculation?

Thanks,
Allan

prubin

A little overview, when the page loads the tables are completely empty and 25px height. I load the data by Ajax when the user clicks the appropriate event on the page.

Ok, I stuck breakpoints in fnMeasure and _fnCalcRowHeight. fmMeasure is called on page refresh which calls _fnCalcRowHeight which calculates 26 as the row height. fnMeasure then calculates a need for 3 rows as my table starts as 25 high until it fills. This happens for all three tables before any data has been loaded. All three tables on this page calculate the row height as 26px.

The tables are then loaded with data and the fnMeasure and _fnCalcRowHeight are never called again and according to FireBug Table 1 has a row height of 26, Table 2 has a height of 30px per row and Table three has a height of 22px per row.

Table 1 seems to be working as expected.
Table 2 seems to have gained 4 px per row because it is on a jQuery UI tab control which is a ui-widget and has a font-size of 1.1em;
Table 3 is also in a Tab, but I had applied a font-size:65% to the tab div because the table did not fit on the tab without.

So it seems we have a issue that I need to manually call fnMeasure again after I re-size the table to re-calculate the rows for the viewport. And _fnCalcRowHeight is not correctly calculating the row height correctly in the first place. The code is adding the test table to body and not the div that the table actually belongs to, so it does not get the correct styling. I have tried to find the original element so that I can attach to it's div instead, but during the initialization of the scroller, that element seems to be missing from the DOM and I have been unable to locate the variable that contains the original parent. that the new table will be attached to when it is created.

This needs to be the div of the tables original parent.

[code]
document.body.appendChild( nDiv );
this.s.rowHeight = $(nTr).height();
document.body.removeChild( nDiv );
[/code]

prubin

FYI, when I manually call fnMeasure after loading the data in the table I watched it calculate the wrong height per row, but now the line count is closer: Showing 2,902 to 2,906 of 2,906 entries Mind you the display contains 8.6 rows. (10 rows at 26 high but the rows are actually 30 high).

allan

I see, so you have hidden tables at initialisation time? In which case yes, the row height will ne recalculated when the tables are shown because when hidden the height doesn't exist (browser doesn't need it, so doesn't waste time calculating it). This can also effect scrolling in DataTables and this is one possible solution: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html - which could be modified to call the Scroll API methods for resizing.

*edit* If you have a link you can give me with a demo showing the issue, that would be really helpful.

Allan

prubin

Yes I already do that but the problem here is that the tables are being row sized by attaching them to the not to the dom object that they actually connect to. This causes them to incorrectly be sized at the default css. I can easily call fnMeasure again when they become visible but it still calculates the row height against body, not with the correct css.
[code]
"_fnCalcRowHeight": function ()
{
var
nDiv = document.createElement('div'),
nTable = this.s.dt.nTable.cloneNode( false ),
nBody = document.createElement( 'tbody' ),
nTr = document.createElement('tr'),
nTd = document.createElement('td');

nTd.innerHTML = " ";
nTr.appendChild( nTd );
nBody.appendChild( nTr );
nTable.appendChild( nBody );
nDiv.className = this.s.dt.oClasses.sScrollBody;
nDiv.appendChild( nTable );
document.body.appendChild( nDiv );
this.s.rowHeight = $(nTr).height();
document.body.removeChild( nDiv );
},
[/code]
document.body.appendChild( nDiv ); <== needs to be parent dom object not body

prubin

Allan?

Can you give me a patch to get this to the correct parent object?

Thanks
Paul.

allan

Hi Paul,

I've just been looking into this and it actually is not possible to insert an element into the DataTables container at that point and get a measurement from it. This is because of how the sDom building works - for speed to creates the wrapper element but doesn't put it into the document until it is finished - i.e. after the initialisation of sDom is complete.

What is probably needed is for DataTables to fire an event at that point, which Scroller can listen for and the react to, but I think I'm going to have to think about it a little bit to see if there is another way.

Allan

prubin

I can understand not wanting to waste time up front, but measuring off of body and not the containing element is going to calculate the wrong row height unless the document has no formatting. The only function I can find that does calculate this.s.rowHeight is fnMeasure / _fnCalcRowHeight could we alter _fnCalcRowHeight so that if it is called after initialization that it measures an actual row that would be styled?