Question

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

所以我的页面的基本布局上有两个3 jQuery DataTables。从我通过检查呈现的代码看到的是插件将创建一个id为“myTableid_wrapper”的div包装器，其中有两个子节点和表格。

现在，如果表格触发滚动功能，那么表格将再次包含在另一个具有overflow：div的div中，以便可以滚动表格。

此div的类名称为“dataTables_scrollBody”。以下是未触发滚动功能的表的示例。

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

这是触发插件滚动功能的表的一般布局。正如您所见，插件会自动生成类“dataTables_scrollBody”的div。

<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。

有没有办法定位类“dataTables_scrollBody”并在通过AJAX创建表时滚动到底部？

Answer 1

假设你像这样初始化了数据表：

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

你可以这样做：

oTable.parent().scrollTop(9999);

如果您有更多数据，可以增加滚动量，或者可能有办法找出包括溢出部分的表格高度。

使用ajax你可能必须将scrollTop代码放在“fnInitComplete”回调函数中，所以它在表格渲染后执行。

...

另一个想法：也许您可以通过aaSorting来反转行的顺序，然后您不必进行任何滚动。

Answer 2

如果像我这样的人最终在这里查找如何舒适地滚动js数据表，我强烈建议您查看scrollTo库，这完美地完成了这项工作：

https://github.com/flesler/jquery.scrollTo] 1

示例用法：

$('<here whole datatable>').scrollTo( '<here target eg td>', 1 );

Jquery DataTable在加载时自动滚动到底部

2 个答案: