Scroller Questions

prubin

I have been using Scroller to make a large virtual table work smoothly, but now I am looking at the look and feel and have found some things I do not understand.

How can I get a Size drop list to work with Scroller? (Scroller does not work unless the height is a fixed number of pixels and because of localization I do not actually know the row height in pixels that gives an even number of rows.)

If I use scroller my table is always 100% of the available width as opposed to sizing with the data, so there is a lot of white space in the middle of the table. How can I let the table size more reasonably?

Thanks.

allan

The size drop down list is effectively useless with Scroller as things stand (since Scroller will actually override whatever you pick anyway) - possibly Scroller should just completely disable the length list... The reason for this is that the amount of data Scroller shows is directly determined by the height of the scrolling window (i.e. sScrollY). If you want to show more data, then increasing sScrollY is the way to go. In future a nice enhancement to Scroller would be to have it directly manipulate sScrollY so you could say "10 rows" or "25 rows" or whatever and it will manipulate sScrollY as needed.

Regarding the width of the table - you'll need to put it into a smaller container element since the table is always set to width 100% when scrolling is enabled (otherwise column misalignment is very likely to occur).

Allan

prubin

Thank you for the informative answer.

I wanted the size drop list for a couple reasons. 1) to get a round number of lines after localization and browser sizing. 2) to allow the user to specify more lines at a time if they have the space on screen.
ok, so I added a little code to success in fnServerData:
[code]
'fnServerData': function ( sSource, aoData, fnCallback ) {
$.ajax( {
'url': sSource,
'type': 'POST',
'success': function (json) {
fnCallback(json);
// since first block is in adjust height
$('div.dataTables_scrollBody').height(DeviceGrid.oScroller.fnRowToPixels(11));
}
[/code]

This seems to work and gives me a 10 line window view port. Strangely however, the information data show one line off:

Showing 1 to 11 of 44 entries even though clear it sized perfectly for 10 lines.

I wonder if this is the correct location to insert this code. More generally could the Scroller package override the base functionality of the size object to execute this line?

Am I making any sense?

allan

Yup - perfect sense. Your code basically looks good to me, although I'm curious about the setting to a height of 11 rows. I've just together an example here that might be useful to play with http://live.datatables.net/ufepeh/2/edit which shows fnDrawCallback being used to set the number of rows visible. As I say its not perfect, and this could really do with being fully integrated into Scroller, but the basic idea should be possible.

One thing to check - are you using the very latest (i.e. the nightly) version of Scroller (available on the download page)?

Allan

prubin

I am using the version that came with 1.8.2, testing the nightly...

Using the nightly of both dataTables and scroller I had to make a small change to get it to work at all:

$('div.dataTables_scrollBody').height(DeviceGrid.fnSettings().oScroller.fnRowToPixels(10));

seems that the oScroller moved. As for the size, 10 now gives the correct height, but now the information says: Showing 1 to 44 of 44 entries until I move the scroll at least 1 time then it correctly shows Showing 1 to 10 of 44 entries.

Also FYI using the nightly of TableTool results in the export buttons no longer working. Actually on further investigation they are working but their hover state is about 200px above their physical location. my xScrollY starts at 26px and then the above set it to 260px and the (flash?) links are still in the original location. this did not happen in the 2.0.1 version

One last thing about the scroller, is there any way to style the scrollbar? I tried using jScrollPane, it inserted several divs to make it's own stuff, but yours seems to override it.

Thanks.

allan

> seems that the oScroller moved

Yup - in 1.0.1.dev it is attached to oSettings rather than the temporary jQuery array (unless you cache that). This is consistent with the other DataTables plug-ins. It was a bug in 1.0.0 :-(

Interesting one about the info calculation being wrong. Can you show me your full DataTables initialisation please - or provide a link / live.datatables.net example?

> Also FYI using the nightly of TableTool results in the export buttons no longer working

Interesting - you might need to call fnResizeButtons on TableTools when this occurs to have it reposition the elements. However I had thought that they were relative to the buttons so I'm not sure what is happening there. I'll need to set up and example and take a look.

> One last thing about the scroller, is there any way to style the scrollbar?

This is really up to the browser options. For example you can style it in Webkit and IE. Not sure about Firefox and Opera. It just uses the browser native scroll chrome, so whatever that is, is what the scrollbar looks like, rather than providing a way to override that specifically (there probably is a way! but I'm afraid its not something I've tried).

Allan

prubin

[quote]Interesting one about the info calculation being wrong. Can you show me your full DataTables initialisation please - or provide a link / live.datatables.net example?[/quote]

I tried to set up an example for you but ZeroClipboard is not available, I was basically going to just create a table sScrollY = 25px; and then set a 5 second timeout to resize it to 260px;

I did some debugging and the buttons are calculated by the glue routine absolutely:

[code]

[/code]

Since I initialize with a sScrollY set to 25 (to show the no data yet line) then expand after the data has loaded to 10 lines they are calculating to the original size. I tried to debug this process, they data loaded while I was messing with it and the buttons worked fine.

[code]DeviceGrid = $('#Device').dataTable( {
'bProcessing': true,
'bServerSide': false,
'sScrollY': '25px',
'bPaginate': false,
'sAjaxSource': location.pathname,
'bJQueryUI': true,
'sDom': '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"fr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"iT>S',
'fnServerData': function ( sSource, aoData, fnCallback ) {
$.ajax( {
'url': sSource,
'type': 'POST',
'success': function (json) {
fnCallback(json);
// since first block is in adjust height
var scroller = DeviceGrid.fnSettings().oScroller;
$('div.dataTables_scrollBody').height(scroller.fnRowToPixels(10));
scroller.fnResizeButtons();
//$('#Device', '.dataTables_scrollBody').jScrollPane();
},
'data':
callSBS('DeviceConfiguration', 'retrieveDeviceInfoByDeviceId', 'UserId',
function () {
var arr1 = new Array();
for(var i=29621; i<29640; i++)
arr1.push(i);
return JSON.stringify(arr1);
})
});
},
});
[/code]

As you can see above I actually tried to call fnResizeButtons, but have not yet been unable to locate the correct object to call from.

allan

Its actually a little bit of a pain to get the TableTools instance at the moment - something I'll correct in the next version:

[code]
var oTT = TableTools.fnGetInstance( document.getElementById('Device') );
oTT.fnResizeButtons();
[/code]

should give you the call.

Did you happen to save off the live example? I'll be able to modify it to add in ZeroClipboard (which is available at "/extras/TableTools/media/js/ZeroClipboard.js" on the live site).

Allan

prubin

Thank you that fixed the buttons. I tried to create an example for you.

http://live.datatables.net/olibeq/3/edit

I cannot use T because of the zero clipboard issue

I cannot find the scroller object, as you can see in the alerts the scroller object is not found

In case the save did not work her is the code:

[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
'sScrollY' : '25px',
'bPaginate': false,
'sDom' : 'frtiS' // add T when zero clipboard is fixed
});
});
setTimeout("fixHeight()", 5000);
function fixHeight() {
var oSettings = oTable.fnSettings();
alert('oSettings:' + oSettings);
var oScroll = oSettings.oScroller;
alert('oScroll:' + oScroll);
$('div.dataTables_scrollBody').height(oScroll.fnRowToPixels(10));
}
[/code]

Also I can you tell me the correct way to refine the $('div.dataTables_scrollBody') incase I have two tables on the same page and do not want to change both?

Thanks
Paul.

allan

Hi Paul,

Updated version with Scroller nightly (to get the correct reference), TableTools and a scroll body limited selector: http://live.datatables.net/olibeq/6/edit

Allan

prubin

Interesting this example clearly moves the buttons automatically. The significant difference I see at this point is jQuery-UI. Perhaps in it's styling it is blocking some code from working.

Also in this example the rendering is off, the scroller is only showing 6 rows at a time even though the scroll body is big enough for 10. This makes the lower half of the scroll body empty.

this is my actual visual settings:
[code]
'bProcessing': true,
'bServerSide': false,
'sScrollY': '25px',
'bPaginate': false,
'sAjaxSource': location.pathname,
'bJQueryUI': true,
'sDom': '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"fr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"iT>S',
'oTableTools': {
'sSwfPath': 'jquery/DataTables-1.8.2/extras/TableTools/media/swf/copy_cvs_xls_pdf.swf'
},
'iDeferLoading': 0,
[/code]

allan

The reason for the table only showing 6 rows initially is that that is all that is needed to fill the 25px you specify for the height of the table. Forcing the height to be greater will obviously then show the gap. One option is to increase sScrollY on initialisation - or you could modify Scroller to load more data.

For jQuery UI - you just need to make sure that all the correct CSS files are included: http://live.datatables.net/olibeq/8/edit

Allan

prubin

This is generally confusing as the example online and running on my machine are exhibiting different incorrect symptoms. My sample is loading server data and I know of no way to make the online example do the same. I had thought that the delay might simulate the same, but no.

I do not know enough about the innards to know where to look. On the one hand I have a work around, on the other it seems that when you have a duplicate able bug it is good to squash it.

perhaps we could set up a sharing session at a time that works for you to look at the problem and either figure it out or point me in the right direction.

Thanks.

prubin

I figured out the line height issue I have been working on styling the data table and had one page where the size worked fine 10 = 10 lines and another where 11=10 lines. I finally realized the difference when I notice a think border between rows. If the table is defined cellpadding="0" cellspacing="0" then you get 10 line when you expect 10 lines and when it is default then you get 9 line when you ask for 10 and 10 when you ask for 11.

$('div.dataTables_scrollBody').height(oScroll.fnRowToPixels(10)); works great when the table has been define correctly.