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

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

這裏是我的代碼：

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

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

來源

2014-02-06 user2675939

更新。原來的答案是針對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/

來源

2014-02-07 12:13:22 davidkonrad

謝謝，這在大多數情況下都有效，但是當你點擊頁面1，頁面2時，它會滾動，但是頁面3不滾動，它具有隨機行爲。該頁面滾動2-3次點擊，然後停止。 – user2675939

@ user2675939，哦，是的 - 你是絕對正確的！沒想到那個。這是因爲dataTables重新創建了一些按鈕，並且每次分頁時都會重置這些事件。例如：如果您只是前進，它會進展順利，但是由於dataTable必須更改這些按鈕的行爲（活動等等），所以事件會被重置。解決方案是在每次事件本身被觸發時將事件解除綁定/綁定到所有paginate_buttons。請參閱上面的更新和更新的小提琴。這無效地工作。 – davidkonrad

謝謝大衛！效果很好。 – user2675939

這摸索出適合我。

$(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; 
      } 
     } 
    }); 
});

來源

2014-12-08 10:57:18

完美。謝謝！ – mrDinkelman

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

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

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

來源

2015-07-23 13:11:03

由於數據表1.10有這個頁面事件 https://datatables.net/reference/event/page

所以可以使用

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

演示：https://jsfiddle.net/mcyhqrdx/

來源

2016-03-24 15:50:27 Finn

您的回答是最好的。 –

感謝的從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; 
      } 
     }, 
     ... 
    }); 
});

謝謝

來源

2016-08-03 07:55:43

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

回答

相關問題