How to Scroll Top to a specific row in table

Question

Hey I have build an app which has a graph and a table. The graph using HighCharts library and the table is a simple table.

Now I have several points in the graph lets say 10 points and 10 samples in the table.

When I click a point a callback is been performed. The callback Highlight the specific row in the table using and id and using scrollTop to scroll to the specific row which has been Highlight.

Every thing works fine in small scales, the point is been clicked and we scrollTop to the right row which has been highlighted.

Things start to get messy when I working in large scales of data,lets say 200 points and 200 samples.This time the correct row is highlight, but the scrollTop action is missing the row and I can't see the highlight row unless I scroll a little bit.

It is hard to demonstrate this example with a small jsfiddle, so I will explain what I did. In the following code, you can see the performed callback, ignore the first two lines which related to the highlight action using a common id between sample and point.

From the fourth line, you can see that I read the index of the wanted sample. Then save the table as target, read the height of table's second child(ignore the headlines of the table).

Then I call animate and scrollTop to Height*index, which means that I calculated the height of the row from the top. Lets say the height is 43 then,

First sample in the first row will have a distance of 0*43 from the top,

Second sample in the first row will have a distance of 1*43 from the top,

Third sample in the first row will have a distance of 2*43 from the top,

N sample in the first row will have a distance of (N-1)*43 from the top and so on..

$scope.highLightRow = function (id) {
            $scope.$apply(function () {
                $scope.selectedId = id;
            });
            var index = $scope.$eval("(detailedData|filter:{id:'" + $scope.selectedId + "'})[0]").index;
            var $target = $('#TableDetailedData');
            var height = $('#TableDetailedData tr:nth-child(2)').height();
            $target.animate({
                scrollTop: ((height || 43) * index)
            }, 500);
        };

The table is looking like this

<div id="TableDetailedData" class="row collapse in overflow">
            <table class="table table-bordered table-scrolled">
                <thead class="thead-scrolled">
                    <tr>
                        <th class="font-blue-steel bold">Date</th>
                        <th class="font-blue-steel bold">Time</th>
                        <th class="font-blue-steel bold">Source</th>
                        <th class="font-blue-steel bold">Validity</th>
                        <th class="font-blue-steel bold">H2</th>
                        <th class="font-blue-steel bold">O2</th>
                        <th class="font-blue-steel bold">N2</th>
                        <th class="font-blue-steel bold">CH4</th>
                        <th class="font-blue-steel bold">CO</th>
                        <th class="font-blue-steel bold">C2H6</th>
                        <th class="font-blue-steel bold">C2H4</th>
                        <th class="font-blue-steel bold">C2H2</th>
                    </tr>
                </thead>
                <tbody  id="tableBody">
                    <tr id="{{::item.index}}" ng-repeat="item in detailedData" ng-init="item.index = $index" ng-class="{'bg-yellow-saffron': item.id == selectedId}">
                        <td>{{::item.date}}</td>
                        <td>{{::item.time}}</td>
                        <td>{{::item.source}}</td>
                        <td>{{::item.validity}}</td>
                        <td>{{::item.H2}}</td>
                        <td>{{::item.O2}}</td>
                        <td>{{::item.N2}}</td>
                        <td>{{::item.CH4}}</td>
                        <td>{{::item.CO}}</td>
                        <td>{{::item.C2H6}}</td>
                        <td>{{::item.C2H4}}</td>
                        <td>{{::item.C2H2}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

In conclusion, my questions is, how to scrollTop to a specific row in a table of lets say 2000 rows using scrollTop of jquery?

Calculate the position of the element relative top of window and scroll to that position in jquery — Andrew Donovan, Aug 16 '16 at 15:54

score 2 · Accepted Answer · answered Aug 16 '16 at 15:55

2

You're probably better off using native window.scroll which takes on two arguments window.scroll(x-direction, y-direction). So, to scroll to a specific element, window.scroll(element.offsetLeft, element.offsetTop).

answered Aug 16 '16 at 15:55

Bwaxxlo

1,860
13
18

What if I want to scroll within a table with fixed height and vertical overflow? – Hugo M. Zuleta Mar 28 '17 at 15:16
1

@HugoM.Zuleta could you explain more? – Bwaxxlo Mar 30 '17 at 14:50
I have a table with fixed headers, and whose body scrolls when it reaches its max height. The headers are clickable and sort the table rows in ascending or descending order, but the selected row moves out of sight usually, since its index changes. I want to be able to show the selected row, even after sorting the table. For this, I thought I could scroll to the selected row's position. Is this possible? I'm using AngularJS and (some) jQuery. – Hugo M. Zuleta Mar 30 '17 at 20:33

How to Scroll Top to a specific row in table

1 Answers1