Scroll top on data load (Bootstrap) issue

mnabialek

It will hard to put here any JS Fiddle, but I'll try to explain my problem.

I use datatables - I load data via AJAX. What I wanted to achieve is when I c
hange page (on bottom table) is scrolling top on table. At the moment I scrolled top the page using the following code:

        $('#{{ $tableId }}').on( 'page.dt', function () {
            $('html, body').animate({
                scrollTop: 0
            }, 200);
            
        });

Everything would be fine, but just after scrolling top, it scrolls me down again to pagination below table.

I've tried to found the issue and what's I found:

At the moment I'm using:

 <script type="text/javascript" src="https://cdn.datatables.net/t/bs/jq-2.2.0,dt-1.10.11/datatables.min.js"></script>

to load datatables - as you use, it;s including jQuery, but it's using Bootstrap version of Datatables.

If only I change this piece of code into:

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>

it's working fine again. For me it seems as strange bug when using Bootstrapped version of Datatables but I'm not a JavaScript guru.

Do you have any idea what else could it be? As I said, changing only this piece of code when I include datatables the problem is fixed, but I would like to use Bootstrap look for table and buttons.

mnabialek

It seems, I figured it out. I don't know why, but in this file:

https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js

there is something like this:

$(host).find( '[data-dt-idx='+activeEl+']' ).focus();

I don't know what was the intention, but the effect is that this makes scrolling down after loading data. So all I need to do is commenting this line, however I think such behaviour should be in somewhere in configuration

zyquivilly

I had the same issue - it looks like it's setting the focus to whichever element is active, which in this case would be the button way at the bottom of the page.

As an alternative to modifying the Javascript, you could watch the page change event and then set the focus to the top of the table (and include a scroll animation if you want to). Here is what I'm doing:

// If the user changes the page, scroll to the top
    $(".dataTable").on("page.dt", function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $("th:first-child").focus(); // need to set focus at the top so that dataTables bootstrap doesn't scroll back to the bottom
    });