I'd like my DataTable to scroll to the bottom whenever a row is added. I have tried multiple fixes for this problem, but none of them work.
Tested solutions:
- How to load table in Datatables and have it scroll to last record automatically on load
- Jquery DataTable auto scroll to bottom on load
Among others...
I think that what separates my case from the others, is that I am using DataTable with the D capitalized.
Anyway, here is my current code:
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex )
{
$(row).attr('id', 'row-' + dataIndex);
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"scrollY": $(window).height()/1.5,
"scrollCollapse": true,
"paging": false,
});
for(var i = 1; i <= 20; i++){
table.row.add([
i,
'action'+i,
]);
}
table.draw();
table.rowReordering();
It would be nice if the table scrolled to bottom whenever a new row is added to it..
I'd like my DataTable to scroll to the bottom whenever a row is added. I have tried multiple fixes for this problem, but none of them work.
Tested solutions:
- How to load table in Datatables and have it scroll to last record automatically on load
- Jquery DataTable auto scroll to bottom on load
Among others...
I think that what separates my case from the others, is that I am using DataTable with the D capitalized.
Anyway, here is my current code:
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex )
{
$(row).attr('id', 'row-' + dataIndex);
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"scrollY": $(window).height()/1.5,
"scrollCollapse": true,
"paging": false,
});
for(var i = 1; i <= 20; i++){
table.row.add([
i,
'action'+i,
]);
}
table.draw();
table.rowReordering();
It would be nice if the table scrolled to bottom whenever a new row is added to it..
Share Improve this question edited May 23, 2017 at 10:28 CommunityBot 11 silver badge asked Jul 23, 2015 at 11:43 user3262713user3262713 3799 silver badges21 bronze badges 2- Have you tried using anchors ? – FrancoisBaveye Commented Jul 23, 2015 at 11:45
- No, never heard of that. – user3262713 Commented Jul 23, 2015 at 12:03
1 Answer
Reset to default 8SOLUTION
To scroll to the bottom of the table, use the code below:
var $scrollBody = $(table.table().node()).parent();
$scrollBody.scrollTop($scrollBody.get(0).scrollHeight);
DEMO
$(document).ready( function () {
var table = $('#example').DataTable({
"createdRow": function( row, data, dataIndex ) {
$(row).attr('id', 'row-' + dataIndex);
console.log($(row).closest('table').parent());
},
"scrollY": $(window).height()/1.5,
"scrollCollapse": true,
"paging": false
});
$('#btn-add').click(function(){
for(var i = 1; i <= 10; i++){
table.row.add([
i,
i + '.2',
i + '.3',
i + '.4',
i + '.5',
i + '.6'
]);
}
table.draw();
// Scroll to the bottom
var $scrollBody = $(table.table().node()).parent();
$scrollBody.scrollTop($scrollBody.get(0).scrollHeight);
});
table.rowReordering();
} );<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>
<link href="//cdn.datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery./jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery./ui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit./mpryvkin/jquery-datatables-row-reordering/95b44786cb41cf37bd3ad39e39e1d216277bd727/media/js/jquery.dataTables.rowReordering.js"></script>
</head>
<body>
<button id="btn-add" type="button">Add records</button>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>