scrolling using the up and down arrow

compsult

I don't know if this is the best way but it is working for me. I just wanted to use the up and down arrow to scroll, with highlighting, paging as necessary. Also, it simulates a click on the row. I am using PHP, so the {$Table} is a PHP variable. I left the alerts in for the curious

[code]
var LastTr = 0; //global

$(document).keydown(function(e) {
var oSettings = oTable.fnSettings();
switch( e.keyCode )
{
case 40:
if ( LastTr+oSettings._iDisplayStart==oSettings.fnRecordsDisplay()) { break; }
MaxTr=(oSettings._iDisplayLength > oSettings._iDisplayEnd) ? oSettings._iDisplayLength : oSettings._iDisplayEnd;
// alert ("Last rec =" + LastTr + " Disp start =" + oSettings._iDisplayStart + " End =" + oSettings._iDisplayEnd + " Disp len =" + oSettings._iDisplayLength + " Max Row =" + MaxTr );
if ( LastTr < oSettings._iDisplayLength )
{
LastTr=LastTr==MaxTr ? MaxTr : LastTr+1;
$('#{$Table} tbody tr:eq('+(LastTr-2)+')').removeClass( 'highlighted' );
$('#{$Table} tbody tr:eq('+(LastTr-1)+')').click().addClass( 'highlighted' );
}
else
{
LastTr=1;
oTable.fnPageChange( 'next' );
$('#{$Table} tbody tr:eq('+(LastTr-2)+')').removeClass( 'highlighted' );
$('#{$Table} tbody tr:eq('+(LastTr-1)+')').click().addClass( 'highlighted' );
/*-- alert ( "End = " + oSettings._iDisplayEnd + " Disp len = " + oSettings._iDisplayLength + " Max Row = " + MaxTr + " Last tr = " + LastTr); --*/
}
break;
case 38:
if ( LastTr==0 || (LastTr-1)==oSettings._iDisplayStart) { break; }
if ( LastTr==1 )
{
LastTr=oSettings._iDisplayLength;
oTable.fnPageChange( 'previous' );
$('#{$Table} tbody tr:eq('+(LastTr)+')').removeClass( 'highlighted' );
$('#{$Table} tbody tr:eq('+(LastTr-1)+')').click().addClass( 'highlighted' );
/*-- alert ( "End = " + oSettings._iDisplayEnd + " Disp len = " + oSettings._iDisplayLength + " Max Row = " + MaxTr + " Last tr = " + LastTr); --*/
}
else
{
LastTr=LastTr==1 ? 1 : LastTr-1;
$('#{$Table} tbody tr:eq('+(LastTr)+')').removeClass( 'highlighted' );
$('#{$Table} tbody tr:eq('+(LastTr-1)+')').click().addClass( 'highlighted' );
/*-- alert ( LastTr ); --*/
}
break;
}
});
[/code]

allan

Very nice! Thanks :-)

Regards,
Allan

compsult

Your welcome. You have created a really useful tool. Thank you

Drako

this is great! thanks for the code!!!

im just having one problem with it.. im using a code to also highlight when i click a row but if i try to scroll up and down after i click, it wont go from the place where i clicked, instead it will go from the last place i scrolled with the keyboard, i havent figure out a way to fix this..i figure i just have to put the index of the row as the LastTr, right? But how to get the row index? oTable.fnGetPosition(event.target.parentNode) will return an internal index.

can you help me? thanks!

this is my click code

[code]
$("#table1 tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
[/code]

Drako

Also trying to make it work with scrollable table. Keeping scrollbar fixed until it gets to the last visible row and release it after or something like this. Any tips? Thanks!

Drako

i did it!!
i used the jquery scrollTo plugin
http://plugins.jquery.com/project/ScrollTo

Im still trying to conciliate mouse clicks and going up and down but im happy i can scroll with up and down now

if anyone needs the code

[code]

//function to stop body scroll
document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};

$(document).keydown(function(e) {
var oSettings = oTable.fnSettings();

switch( e.keyCode )
{
case 40: //down

if ( LastTr+oSettings._iDisplayStart==oSettings.fnRecordsDisplay()) { break; }
MaxTr=(oSettings._iDisplayLength > oSettings._iDisplayEnd) ? oSettings._iDisplayLength : oSettings._iDisplayEnd;
// alert ("Last rec =" + LastTr + " Disp start =" + oSettings._iDisplayStart + " End =" + oSettings._iDisplayEnd + " Disp len =" + oSettings._iDisplayLength + " Max Row =" + MaxTr );
if ( LastTr < oSettings._iDisplayLength )
{
LastTr=LastTr==MaxTr ? MaxTr : LastTr+1;
$('#table1 tbody tr:eq('+(LastTr-2)+')').click().removeClass( 'row_selected' );
$('#table1 tbody tr:eq('+(LastTr-1)+')').click().addClass( 'row_selected' );
$('.dataTables_scrollBody').scrollTo('#table1 tbody tr:eq('+(LastTr-1)+')');

}
else
{
LastTr=1;
oTable.fnPageChange( 'next' );
$('#table1 tbody tr:eq('+(LastTr-2)+')').click().removeClass( 'row_selected' );
$('#table1 tbody tr:eq('+(LastTr-1)+')').click().addClass( 'row_selected' );
$('.dataTables_scrollBody').scrollTo('#table1 tbody tr:eq('+(LastTr-1)+')');
// alert ( "End = " + oSettings._iDisplayEnd + " Disp len = " + oSettings._iDisplayLength + " Max Row = " + MaxTr + " Last tr = " + LastTr);
}
break;
case 38: //up
$('.dataTables_scrollBody').scrollTo('-=11px');
if ( LastTr==0 || (LastTr-1)==oSettings._iDisplayStart) { break; }
if ( LastTr==1 )
{
LastTr=oSettings._iDisplayLength;
oTable.fnPageChange( 'previous' );
$('#table1 tbody tr:eq('+(LastTr)+')').click().removeClass( 'row_selected' );
$('#table1 tbody tr:eq('+(LastTr-1)+')').click().addClass( 'row_selected' );
$('.dataTables_scrollBody').scrollTo('#table1 tbody tr:eq('+(LastTr-1)+')');
// alert ( "End = " + oSettings._iDisplayEnd + " Disp len = " + oSettings._iDisplayLength + " Max Row = " + MaxTr + " Last tr = " + LastTr);
}
else
{
LastTr=LastTr==1 ? 1 : LastTr-1;
$('#table1 tbody tr:eq('+(LastTr)+')').click().removeClass( 'row_selected' );
$('#table1 tbody tr:eq('+(LastTr-1)+')').click().addClass( 'row_selected' );
$('.dataTables_scrollBody').scrollTo('#table1 tbody tr:eq('+(LastTr-1)+')');
// alert ( LastTr );
}
break;
}
});


[/code]