I have a problem. I would like to scroll top of table on page change when using datatables.

I've added the following code

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

(at the moment it scrolls to top of page) but it doesn't pletely work.

When I click other page, page is scrolled top, but just after data is loaded it scrolls down again. I don't know what is happening (I'm not JavaScript guru) but it seems Datatables runs extra action after data are loaded that scrolls again to bottom. Is there any way to prevent Datatables (probably) from scrolling down after loading data?

I could use draw.dt instead of page.dt and it would work fine but it would cause other side effects. If table is placed somewhere on page, just after loading data, it would be scrolled to top of page (or top of table) and I would like to run this only after changing page.

I have a problem. I would like to scroll top of table on page change when using datatables.

I've added the following code

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

(at the moment it scrolls to top of page) but it doesn't pletely work.

When I click other page, page is scrolled top, but just after data is loaded it scrolls down again. I don't know what is happening (I'm not JavaScript guru) but it seems Datatables runs extra action after data are loaded that scrolls again to bottom. Is there any way to prevent Datatables (probably) from scrolling down after loading data?

I could use draw.dt instead of page.dt and it would work fine but it would cause other side effects. If table is placed somewhere on page, just after loading data, it would be scrolled to top of page (or top of table) and I would like to run this only after changing page.

• javascript
• jquery
• datatables

Share Improve this question Follow asked Feb 28, 2016 at 20:16 Marcin NabiałekMarcin Nabiałek 112k4343 gold badges267267 silver badges298298 bronze badges 2

• 1 You should provide more code, because the behaviour you are describing is not replicable -> jsfiddle/0f9Ljfjr/786 – davidkonrad Commented Feb 28, 2016 at 22:26
• @davidkonrad Thanks a lot for your ment. It's really hard to include repicable code. I've just put codepen.io/anon/pen/ONPrvj - it took me a few hours to track this and it seems the problem is when data is loaded via AJAX (if it's in HTML source everything seems to be working fine) and when I use those bootstrap versions. Is there any way you could look at it? – Marcin Nabiałek Commented Mar 1, 2016 at 18:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I figured it out, but it took me a lot of time. The issue was when I was using Bootstrapped version:

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

when I changed it into:

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

it was working fine.

So finally I noticed I can include it like so (datatables and bootstrap plugin in separate files):

<script type="text/javascript" src="https://code.jquery./jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>

The problem was in last file (not minified version is here - https://cdn.datatables/1.10.11/js/dataTables.bootstrap.js ). In this file there is a line:

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

this exact line causes that when I clicked on button to change page after loading data focus was moved again to bottom of page. When I used this file locally and mented this line, now when I used:

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

I was moved to top of page, and when I used;

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

I was moved to top of table.

This works well globally, without having to write code to target each table on your site/application.

// Scroll back to top of datatable when its pagination button is clicked to load/display next page
        $('.dataTables_wrapper').click(function(event) {
            var clickedElem = event.target;
            if ($(clickedElem).hasClass("paginate_button") || $(clickedElem).parents('.dataTables_paginate').length) {
                /* Not when the button is diabled */
                if (!$(clickedElem).hasClass("disabled") && !$(clickedElem).parents('.disabled').length) {
                    let divContainingTheDataTable = $(clickedElem).closest('.dataTables_wrapper');
                    $('html, body').animate({
                        scrollTop: $(divContainingTheDataTable).offset().top - 60
                    }, 200);
                }
            }
        });