Jquery DataTable自动滚动到底部加载 [英] Jquery DataTable auto scroll to bottom on load

问题描述

我正在使用 jQuery DataTable 插件，看不到找到方法，使其滚动到当数据通过AJAX加载时，表的底部。

I am using the jQuery DataTable plug-in and can not see to find a way to make it scroll to the bottom of the table when the data loads via AJAX.

所以我的页面的基本布局有两个3个jQuery数据表。通过检查渲染的代码，我看到的是插件将创建一个id为myTableid_wrapper的div包装器，其中两个孩子为标题和表。

So the basic layout of my page has two 3 jQuery DataTables on it. From what I see by inspecting the rendered code is that the plug-in will create a div wrapper with an id of "myTableid_wrapper" with two children a header and the table.

现在如果表触发滚动功能，那么表将再次被包含在另一个div中：overflow：hidden，因此可以滚动表。

Now if the table is triggers the scrolling ability then the table will again be wrapped in another div with overflow:hidden so the table can be scrolled.

这个div有一个类名dataTables_scrollBody。这是一个没有触发滚动功能的表格的例子。

This div has a class name of "dataTables_scrollBody". Here is an example of a table that has not triggered the scroll feature.

<div id="myTable1_wrapper" class="dataTables_wrapper" >
  <div id="case_activity_table_filter">no worried about this guy</div>
    <table id="myTable1" >does not matter whats in here</table>
</div>

这是一个已经触发插件的滚动功能的表的一般布局。你可以看到div中的类dataTables_scrollBody是由插件自动生成的。

Here is the general layout of a table that has triggered the scroll feature of the plugin. As you can see the div with the class "dataTables_scrollBody" is auto-generated by the plugin.

<div id="myTable2_wrapper" class="dataTables_wrapper" >
  <div id="case_activity_table_filter">no worried about this guy</div>
  <div class="dataTables_scrollBody" style="overflow:hidden" >
    <table id="myTable2" >does not matter whats in here</table>
  </div>
</div>

这两个表都驻留在同一个页面上。这两个表可能有也可能没有滚动div。

Both of these tables reside on the same page. Both of these tables may or may not have the scroll div.

有没有办法将类dataTables_scrollBody定位，当通过AJAX创建表时，它是否滚动到底部？

Is there way to target class "dataTables_scrollBody" and have it scroll bottom when the table is created via AJAX?

推荐答案

假设您像这样初始化了datatable：

assuming you initialized the datatable like this:

var oTable = jQuery('#myTable1').dataTable({
    "bProcessing": true,
    "bPaginate": false,
    "sScrollY": "200",
    "bScrollCollapse": true
});

你可以做：

oTable.parent().scrollTop(9999);

如果您有更多数据，或者可能有一种方法可以找到，您可以增加滚动的数量出现包含溢出部分的表的高度。

you can increase the amount to scroll if you will have more data, or there's probably a way to find out the height of the table including the overflow part.

与ajax可能必须将scrollTop代码放在fnInitComplete回调函数中，因此它在表之后执行被渲染。

with ajax you might have to put the scrollTop code in the "fnInitComplete" callback function, so it's executed after the table is rendered.

...

另一个想法：也许你可以用aaSorting来扭转行的顺序，那么您不必执行任何滚动。

Another idea: maybe you can reverse the order of the rows with aaSorting, then you don't have to do any scrolling.

这篇关于Jquery DataTable自动滚动到底部加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！