Jquery DataTable auto scroll to bottom on load

问题:

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.

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.

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.

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>

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>

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

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

回答1:

assuming you initialized the datatable like this:

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

you can just do:

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.

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

...

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

回答2:

If somebody like me end up here looking up how to comfortably scroll the js datatable, I would strongly recomend taking look at scrollTo library, which perfectly does the job:

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

example usage:

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