javascript - jQuery Datatables scroll to bottom when a row is added -
i'd datatable scroll bottom whenever row added. have tried multiple fixes problem, none of them work.
tested solutions:
- how load table in datatables , have scroll last record automatically on load
- jquery datatable auto scroll bottom on load
among others...
i think separates case others, using datatable d capitalized.
anyway, here 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 = 1; <= 20; i++){ table.row.add([ i, 'action'+i, ]); } table.draw(); table.rowreordering(); it nice if table scrolled bottom whenever new row added it..
solution
to scroll bottom of table, use 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 = 1; <= 10; i++){ table.row.add([ i, + '.2', + '.3', + '.4', + '.5', + '.6' ]); } table.draw(); // scroll 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.net/1.10.7/css/jquery.datatables.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://cdn.datatables.net/1.10.7/js/jquery.datatables.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <script src="https://cdn.rawgit.com/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>
Comments
Post a Comment