Scroll to highlighted row

jclukies

I am building the following scrolling table (1.7 Beta 3, Firefox):

[code]
$('ssTbl').dataTable({

"aoColumnDefs": [ { "bSortable": false, "aTargets": [1,2,3,4,5,6] },
{ "bVisible": false, "aTargets": [7] }
],
"aaSorting": [],
"bAutoWidth": true,
"bJQueryUI": true,
"sScrollX": "99%",
"sScrollY": "500px",
"sDom":..... /* Toolbar with First, Prev, Next, Last links here... */
});

[/code]

The toolbar allows the user to go through each row, one-by-one with Prev and Next buttons and it displays data to the user related to that record. The function also highlights the selected row.

When the user wants to use the toolbar and the row he selects is not in the table view (scroll required), then I would like to be able to have the table scroll to that row. If I set the _iDisplayStart to the row number, all of the preceding rows are no longer shown in the table, and that is not really an option.

Is there something like Java's JComponent.scrollRectToVisible() already implemented for this case?

Thanks - John

przemek

Hello! I am also interested in the answer to your question.

cdaigle

I use the scrollTo plugin here: http://plugins.jquery.com/project/ScrollTo

You just need to determine upon next/previous whether or not the new row is fully visible.

przemek

Thanks man! That is exactly what i needed ! ...

And for those of you, who don't have time to figure out how to use the scroller:

[code]
var scroller = oTable.fnSettings().nTable.parentNode;

$(scroller).scrollTo( object, 1 );
[/code]

- object - in my case is the to which i want to scroll
- oTable - datatable.

johna

I realize this is an old topic, but I'm trying to implement this scroller and can't seem to make it work. Newbie issue, I suspect.

Where do the lines in przemek's post go? Am I missing an initialization?

And if my selected row has class renamesel, would this be correct?

[code]$(scroller).scrollTo( 'tr.renamesel', 1 );[/code]

Many thanks,
John

FParsons

I second this - I want to make a selected row scroll into view if it's not visible, but I had no luck using the 'ScrollTo' plugin . I am passing in the html of the entire row. Is the example above correct?

johna

Realized I was missing the init.js file from the source of http://demos.flesler.com/jquery/scrollTo/

With that in, this code works:
[code]
$(document).ready(function() {
var oTable = $('#renametab1').dataTable();
$('tbody tr td:nth-child(2)', $('#renametab1')[0]).editable('setsavecust.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "13px"
} );
var scroller = oTable.fnSettings().nTable.parentNode;
$(scroller).scrollTo( 'tr.renamesel', 1);
} );
[/code]

johna

The datatable above is one of four in tabs on that page - when I get the scrollto working with the code above, only the first tab scrolls to selected and only the first tab is editable - other three don't scroll and won't edit. Must be something in the way I set var scroller, but I can't figure it out. Any help would be greatly appreciated.