Jquery datatables data scroll up when pages are clicked below

Question

I am using jQuery datatable with bottom pagination. When the pages click from below, I want it to scroll up, so users don’t need to manually do this for longer pages. I tried using dataTables_scrollBody, but it does not work properly

Here is my code:

oTable = $('#tTable').dataTable({
    "fnDrawCallback": function(o) {
        $('dataTables_scrollBody').scrollTop(0);
     }
});

A page scrolls up only when you click first / last (which, in my opinion, is the default behavior), but not every time you click on a page.

Answer 1

Update . The initial response was aimed at 1.9.x. In dataTables 1.10.x, this is much simpler:

table.on('page.dt', function() {
  $('html, body').animate({
    scrollTop: $(".dataTables_wrapper").offset().top
   }, 'slow');
});

demo → http://jsfiddle.net/wq853akd/

---

[ ] .dataTables_wrapper .paginate_button. :

function paginateScroll() {
    $('html, body').animate({
       scrollTop: $(".dataTables_wrapper").offset().top
    }, 100);
    console.log('pagination button clicked'); //remove after test
    $(".paginate_button").unbind('click', paginateScroll);
    $(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();

. → http://jsfiddle.net/EjbEJ/

Answer 2

Datatables 1.10 https://datatables.net/reference/event/page

,

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

: https://jsfiddle.net/mcyhqrdx/

Answer 3

.

$(document).ready(function() {
    var oldStart = 0;
    $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "fnDrawCallback": function (o) {
            if ( o._iDisplayStart != oldStart ) {
                var targetOffset = $('#example').offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 500);
                oldStart = o._iDisplayStart;
            }
        }
    });
} );

Answer 4

. .

$("#divContainingTheDataTable").click(function(event){
    if ($(event.target).hasClass("paginate_button")) {
        $('html, body').animate({
             scrollTop: $("#divContainingTheDataTable").offset().top
        }, 200);
    }
});

.paginate_button, . div, , , .

Answer 5

. , , paginate, , .

StackOverFlow Datatables.

:

var isScroll = false    

paginate isScroll, true:

$(document).on('click', '.paginate_button:not(.disabled)', function () {
    isScroll = true;
});

:

$(document).ready(function () {
    $('#myDataTable').DataTable({
        ...
        "fnDrawCallback": function () {
            if (isScroll) {
                $('html, body').animate({
                    scrollTop: $(".dataTables_wrapper").offset().top
                }, 500);
                isScroll = false;
            }
        },
        ...
    });
});

@0110