Scroller Questions
Scroller Questions
prubin
Posts: 26Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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?
One thing to check - are you using the very latest (i.e. the nightly) version of Scroller (available on the download page)?
Allan
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.
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
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.
[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
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.
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
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]
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
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.
$('div.dataTables_scrollBody').height(oScroll.fnRowToPixels(10)); works great when the table has been define correctly.