CODEWITHSUNDEEP
html
Shane Courtrille
Shane Courtrille

Reputation: 14097

How to scroll to row in table which is using overflow for scrollbars?

I have a table which needs to be scrollable within a single page. I've used a jQuery scrollable table plugin to accomplish this but now I need to figure out how to scroll to a specific row.

I've tried a few different methods including:

$.scrollTo($('#rowIWantToScrollTo'));

and

var rowpos = $('#rowIWantToScrollTo').position();

$('#myTable').scrollTop(rowpos.top);

and

$('#rowIWantToScrollTo').scrollIntoView();

And nothing has worked so far.

Upvotes: 0

Views: 3098

Answers (2)

Jarrett Barnett
Jarrett Barnett

Reputation: 803

LIVE DEMO

Here's how to do it. (You were close).

1) Fetch top offset of element using offset() and .top

2) Scroll to element using ScrollTo

I broke it up a bit for illustration purposes.

Javascript:

$("a").click(function(e){

  var _offset = $(".row9").offset();
  var _topoffset = _offset.top;

  $(".scrollbox").scrollTop(_topoffset);

  e.preventDefault();
});

Upvotes: 1

neo108
neo108

Reputation: 5254

Yes, you are right @ShaneCourtrille. From what I can see, there is no functionality inbuilt in the plugin to scroll to a particular row.

Below is a very simple solution using hyperlinks. Not sure if this is what you want, but it does the job...

Create an internal anchor like this...

<tr>
    <td><a name="toHere"></a>FL</td>
    <td>$1,364.27</td>
    <td>$712.05</td>
    <td>$211.11</td>
    <td>$416.87</td>
    <td>$1,364.27</td>
    <td>$712.05</td>
    <td>$211.11</td>
    <td>$416.87</td>
</tr>

and link it outside the table - <a href="#toHere">Scroll to my specified row</a>

I just did a brief search and there are other plugins out there. One is DataTables.

There are few more plugins listed in the following link that might be of help to you...

https://stackoverflow.com/questions/159025/jquery-grid-recommendations

Upvotes: 0

Related Questions