Child row show/hide jumps to top of table when out of view

sdorman

I'm having problems when showing/hiding child rows that are outside of the main view, the action causes the page to scroll up to the top of the table. Yet the examples I followed on this site do not have the problem. I'm hoping someone can point me in the right direction of what could cause this or what I can look at.

I implemented 2 different tables in my .Net 5 Core app using Bootstrap 4 with Datatables 1.10.21. For both tables, if a parent row is expanded/collapsed at the bottom of the table, the page jumps to the top of the table after the expansion/collapse is complete. It only happens if I have to scroll down to show the child rows or get to the parent row's collapse button.

For example, I have 10 rows displayed that fit in the view. I expand the last row, there is no jumping of the page but some of the child rows are out of view. I scroll down to see the children (and the page footer) and then collapse the same parent, the child rows hide but the page jumps up to the top of the table.

The perplexing part for me is that I followed the following examples which do not have this problem.

https://datatables.net/examples/api/row_details.html

http://live.datatables.net/tefaxula/4/edit

In both of my tables, I use ajax to get json objects containing the parent and child data.

For the 1st table, I build the html for the child row in the format function that is called when showing the child, similar to
this code

        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

which is in this example:
https://datatables.net/examples/api/row_details.html

For the 2nd table, I use a datatable as the child row, where I create/destroy the child table using this example (I only have one child level):

http://live.datatables.net/tefaxula/4/edit

The examples work fine, my tables do not. I used slideup()/slidedown() with Font Awesome icons for the buttons but removing them, commenting out the bootstrap libraries, and trying Chrome and Firefox all result in the same behavior.

I looked at the problem and solution stated here

https://datatables.net/forums/discussion/63869/table-jumps-back-to-first-row-when-row-click-expands

which says to use draw(page) instead of draw(false) to maintain the position but I am not calling the draw function myself.

Any ideas on possible causes?

kthorngren

The examples you linked to aren't using any of the Datatables scrolling features like scrollX. You mention something about scrolling. Have you enabled a Datatables scrolling feature?

Are you using server side processing, serverSide set true?

We will need to see the issue replicated to help debug. Can you update the example test case to show the issue?

Kevin

sdorman

I have not enabled any scrolling features and I am not using serverSide. I did try to play with that test case to use the same table settings I'm using but I didn't get the problem. That's why I thought maybe it was related to Bootstrap or some other library I am using in my application. I will try to modify that case further to see if I can get as much of my set up in there as possible using the /ajax/objects.txt data.

kthorngren

which says to use draw(page) instead of draw(false) to maintain the position but I am not calling the draw function myself.

Is the problem that the first page of the Datatable is displayed or that the page moves up to the top of the table but the same page is displayed?

collapse the same parent, the child rows hide but the page jumps up to the top of the table.

Sounds like the page moves up to display the top of the table and remains on the same page. If this is the case its not the problem described using draw() from the thread you linked. Look for some event that fires which uses something scrollTo() to move around on the page.

Kevin

sdorman

Yes, it remains on the same page and moves to the top of the table. I am not using the Scroller extension which is needed for scrollTo(). I added the following to capture the scroll event but it didn't trigger:

    $('#sites_wrapper .dataTables_scrollBody').scroll(function () {
        console.log('sites wrapper');
    });

    $('.dataTables_scrollBody').on('scroll', function () {
        console.log('sites tbody');
    });

I updated live.datatables.net/tefaxula/4/edit with the above code and uncommented out the console writes when the draw event is called - see here
live.datatables.net/tefaxula/29/edit

Interestingly, in that example, the draw only gets triggered when expanding the child rows. In my application, it gets triggered when expanding but also randomly gets triggered when collapsing rows. At first, I thought it only triggered if it was the first time I collapsed that row but after a few more tries, it triggers again. It's inconsistent and doesn't happen at all with the live example.

kthorngren

What I'm trying to understand is if the web page itself is scrolling up to a certain point - where the table is displayed for example. I meant something like Javascript scrollTO().

Or if the table display being updated to show the first page.

but also randomly gets triggered when collapsing rows

Yes, that sounds strange.

Make sure your child draw event(s) have e.stopPropagation() so the draw() doesn't bubble up to the parent.

Kevin

sdorman

I've made some progress but don't fully understand what is happening yet.

I updated my test case so you can see the behavior:

live.datatables.net/tefaxula/29/edit

I added a new column on the parent table that uses a columnDef to render an <a href> button. I gave it a different class name than the original column and captured the click on that class. When expanding/collapsing using this new column, the jumping occurs.

columnDefs: [
    {
        targets: 0,
        className: 'childdetails-control',
        render: function (data, type, row, meta) {
            return '<a href="#" class="btn btn-link" data-id="' + row.name + '" > B </a>';
        }
    }
]

When using the original button - whose behavior is captured by setting the className on the column data - the expanding/collapsing works fine.

columns: [
    {
        data: null,
    },
    {
        className: "details-control",
        orderable: false,
        data: null,
        defaultContent: "",
        width: "10%"
    },
...

kthorngren

I see. To replicate we need to set the page length to 25 or something and scroll down. The problem is an HTML behavior. See this SO Thread. Use href="#/" like this:
http://live.datatables.net/yuwurozu/1/edit

Kevin

sdorman

I think this link explains the problem/solution

https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag

I originally used the <a href> button to be similar to what I had for edit and delete. But while getting the slideUp/slideDown action working, I must have removed the function that was called when the button was clicked - that function had the e.preventDefault().

Thanks for all your help Kevin!

sdorman

Oddly enough, href="#/" didn't work for me but calling a function on the click that has e.preventDefault() does. I think I'm too worn out now to figure out why Thanks again.

kthorngren

Glad its worked out

Kevin