How do I modify fnDisplayRow to animate scrolling to the effected row?

robertbrower

I'm trying to modify the fnDisplayRow plugin so that the row being displayed is scrolled to the top of the scrollbody. But I can't get it to work.

Since I do not want to return if the display all is selected I commented that out. It is the bit of code after this.oApi._fnDraw(oSettings); which has got me stumped.

[code]
$.fn.dataTableExt.oApi.fnDisplayRow = function (oSettings, nRow) {
// Account for the "display" all case - row is already displayed
// if (oSettings._iDisplayLength == -1) {
// return;
// }

// Find the node in the table
var iPos = -1;
for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
if (oSettings.aoData[oSettings.aiDisplay[i]].nTr == nRow) {
iPos = i;
break;
}
}

// Alter the start point of the paging display
if (iPos >= 0) {
oSettings._iDisplayStart = (Math.floor(i / oSettings._iDisplayLength)) * oSettings._iDisplayLength;
this.oApi._fnCalculateEnd(oSettings);
}

this.oApi._fnDraw(oSettings);

var $row = $(nRow);
var $scrollBody = $(oSettings.nTableWrapper).find(".dataTables_scrollBody");
var $table = $scrollBody.children().first();
$scrollBody.animate({
scrollTop: $row.position().top
});
};
[/code]

When scrolling to higher index rows, the scroll bar just disappears. Any tips are appreciated greatly. Thank you.

Robert

robertbrower

I should clarify things here. I am using the jquery UI layout plugin. The datatable is in a pane which can be resized. When the pane is resized so is the data table. This means that the height of the scrollbody of the datatable can change and is usually not exactly the same height at the number of records per page multiplied by the height of the rows but some other size which causes a scrollbar to appear. The user can select a row by clicking on something external to the datatable (master/slave). I want to use the plugin above but change it so that the table is scrolled to the selected row, e.g. so the selected row is scrolled to the top (if possible).

robertbrower

Additional info, the ScrollTo plugin exhibits the same problem.

http://balupton.github.io/jquery-scrollto/

The row is scrolled to but the top of the table seems to get cut off which makes the scrollbar disappear...

allan

Yup - I'd try using just the scrollTo plug-in and not fnDisplayRow which is designed for paging.

Are you using Scroller? What's the configuration of your table? I've heard of the scrollTo plug-in being used successfully with DataTables before.

Allan

robertbrower

Thank you Allan. I got it working.

Now I use the unmodified fnDisplayRow to go to the correct page.
Then I use this plugin: http://flesler.blogspot.de/2007/10/jqueryscrollto.html to scroll to the row.
I'm not sure what's up with the other scrollTo plugin, but this one is good.

Works nicely.

Robert