scrolling using the up and down arrow
scrolling using the up and down arrow
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]
[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]
This discussion has been closed.
Replies
Regards,
Allan
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]
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]