How to maintain jQuery DataTables scroll position after .draw()

15
votes

I am using jQuery Datatables plugin for a smal table (12 rows). Some <input type="text" ... fields allow editing. When the input field loses focus I need to validate its value and possibly change the field value. I haven't been able to get modified input field values to be recognized by DataTables without issuing a .draw() afterwards, but this causes the table to scroll to the top of the table.

Is there a way of maintaining the current scroll position after issuing a .draw()?

$('#mytable').on('blur', 'input', function (e) {

    var inputFieldId = this.id;
    var inputFieldVal = $(this).val();

    { ... perform validation of field value ... }

    $('#mytable').DataTable().rows().invalidate().draw();
});

EDIT

I saw someone trying to do the same thing I am and they indicated that the following code worked for them. This seems like a very simple way of accomplishing what I need, but I'm always getting scrollTop = 0 myself. Anyone see how I can get the row index of the currently selected row?

var scrollPos = $(".dataTables_scrollBody").scrollTop();
$('#mytable').DataTable().rows().invalidate().draw(false);
$(".dataTables_scrollBody").scrollTop(scrollPos);
7
jquerydatatablesjquery-datatables
Sorry I didn't see your changes, you code is correct, but try with scrollTo() $(".dataTables_scrollBody").scrollTo('#IDROW'). which 'IDROW' is the ID of the ROW or just ID of the input you changed – JC Sama
Just in case you have multiple dataTables with the same className, you should use ID selector $("#divContrainer1 > .dataTables_scrollBody").scrollTop() – JC Sama
Yes, you can do that. With a dirty hack, but you can. Seek for my answer below. – PatlaDJ

7 Answers

24
votes
var table = $('table#example').DataTable({
    "preDrawCallback": function (settings) {
        pageScrollPos = $('div.dataTables_scrollBody').scrollTop();
    },
    "drawCallback": function (settings) {
        $('div.dataTables_scrollBody').scrollTop(pageScrollPos);
    }
});

This appears to work for me. I just had to find the div.dataTables_scrollBody after the table was drawn.

7
votes

Just wanted to add this here though it's a slightly different scenario - It worked for my case and will likely be useful to some others who arrive here looking for answers.

I'm using server side processing and doing a refresh of table data once every 10 seconds with table.ajax.reload(). This function does accept an argument to maintain current paging value but fails to keep scroll position. The solution was very similar to the one the OP mentioned and sets the scroll position on the callback. Not sure why it didn't work for him but here's the interval code I'm using with success:

setInterval( function () {
    scrollPos = $(".dataTables_scrollBody").scrollTop();
    myTable.ajax.reload(function() {
        $(".dataTables_scrollBody").scrollTop(scrollPos);
    },false);
}, 10000 );
5
votes

The way I solved it with DataTables 1.10 is to use preDrawCallBack to save the ScrollTop position and then DrawCallback to set it.

var pageScrollPos = 0;

var table = $('#example').DataTable({
  "preDrawCallback": function (settings) {
    pageScrollPos = $('body').scrollTop();
  },
  "drawCallback": function (settings) {
    $('body').scrollTop(pageScrollPos);
  }
});
5
votes

If you pass the draw function the page parameter, the table will not shift in scrolling, but it will re-read from the .DataTable source. E.g. after "saving" data that updates the DataTable:

$("your-selector").DataTable().row(t_itemid).invalidate();
$("your-selector").DataTable().row(t_itemid).draw('page');

Note: I am making use of an id column in my DataTable instantiation which makes it easy to work directly with a single row. But I believe the page parameter will give the desired result.

3
votes

I don't think you can do that, but you can use the Callback function instead:

$(document).ready(function() {
    var selected = [];

    $("#example").dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/ids-arrays.php",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        }
    });

    $('#example tbody').on('click', 'tr', function () {
        var id = this.id;
        var index = $.inArray(id, selected);

        if ( index === -1 ) {
            selected.push( id );
        } else {
            selected.splice( index, 1 );
        }

        $(this).toggleClass('selected');
    } );
} );

Ref : https://datatables.net/examples/server_side/select_rows.html

0
votes

How about this hack? It does not involve scrollTop() First open jquery.dataTables.js and seek for this line, and remove it:

divBodyEl.scrollTop = 0

After that put the following code before your draw()/clear() invocations:

var $tbl=$('#my_table_id');
if (!document.getElementById('twrapper')) $tbl.wrap( '<div id="twrapper" style="display:block; height:'+$tbl.height()+'px;"></div>' );
else $('#twrapper').css('height',$tbl.height()+'px');

It took me some time to figure out this.

0
votes

The following code retains the scroll position upon Datatables server side reload. 

var table =  $('#mytable').DataTable();

var start_row = table.scroller.page()['start'];

table.ajax.reload(function () {

    table.scroller().scrollToRow(start_row, false);

}, false);