jquery datatables從底部點擊頁面時滾動到頂部

Question

我正在使用帶有底部分頁的jQuery數據表。當從底部點擊頁面時，我希望它將頁面滾動到頂部，以便用戶不必爲較長的頁面手動執行該操作。我試着用dataTables_scrollBody，但它不能正常工作

這裏是我的代碼：

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

頁面滾動到當您單擊只有頂部第一/最後（我認爲這是默認的行爲），但而不是每次點擊頁面。

Answer 1

更新。原來的答案是針對1.9.x.在數據表1.10.x這是很容易：

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

演示 - >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

這摸索出適合我。

$(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 3

以上答案都不適用於我。這是我的解決方案。

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

我試圖靶向.paginate_button但它似乎從來沒有開火。我的方法檢查包含數據表的div，如果您單擊分頁按鈕，頁面會滾動到容器的頂部。

Answer 4

由於數據表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 5

感謝的從davidkonrad。但是當我使用他的代碼時，在點擊分頁按鈕後，頁面滾動到頂部，然後在加載數據後滾動到底部。

我在StackOverFlow和Datatables論壇中組合了多篇文章。

我定義一個全局變量：

var isScroll = false  

當點擊PAGINATE按鈕的isScroll設置爲true：

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

最後：從@ 0110

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

謝謝