jQuery Datatables prevent scroller reset on table reload

Question

I finally got my datatable to reload on intervals. But what I'm noticing now is if you scrolled to the right, the table reload will reset the scroll back to the left. The same if you are scrolled down, it will reset back to the top.

I need to stop this from happening.

I've tried all the answers from this post: How to maintain jQuery DataTables scroll position after .draw()

Nothing seems to work. Maybe I'm missing something.

I noticed on this post, the question is using a datatables.scroller.min.js: DataTables save state scroll position

This led me to this: https://cdn.datatables.net/scroller/1.4.2/

But there are so many CSS files there. I'm not sure which one to use, if any should be used at all.

Maybe I do not need any of the above, and I just need to adjust my code below to prevent the scroll reset from happening:

Click event:

$('.searchSubmit').on('click', function() {
  updateDataTable();

  var idle = 0;
  var idleInterval = setInterval(timer, 5000);
  $(this).mousemove(function(e){idle = 0;});
  $(this).keypress(function(e){idle = 0;});
  function timer()
  {
    idle = idle + 1;
    if(idle > 2)
    {
      updateDataTable();
      console.log('table reloaded'); 
    }
  }
});

Datatable:

function updateDataTable() {
  $.ajax({
    url: 'api/railmbs.php',
    type: 'POST',
    data: data,
    dataType: 'html',
    success: function(data, textStatus, jqXHR)
    {
      var jsonObject = $.parseJSON(data); 
      var table = $('#example1').DataTable({    
        "data": jsonObject,
        "columns": [
          { "data": "BILL" },   
          { "data": "CONTAINER" },
          // few more columns
        ],
        "iDisplayLength": 25,
        "paging": true,
        "scrollY": 550,
        "scrollX": true,
        "bDestroy": true,
        "stateSave": true,  
        "autoWidth": true
      });
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail');
    }
  });
}

is not easier to use [`DataTable().ajax.reload()`](https://datatables.net/reference/api/ajax.reload())? it will do what you0re currently doing and if you set up `reload(null, false)` it won't reset positions — William-H-M, Nov 27 '17 at 17:42
I was initially using the method you are referring to, but I could not get the reload working properly. However, if you wouldn't mind providing an example, I would at least try it. — John Beasley, Nov 27 '17 at 17:44
@JohnBeasley "*but I could not get the reload working properly.*", because you didnt' pay attention to the answers and comments. — davidkonrad, Nov 27 '17 at 19:24
@davidkonrad - In regards to the DataTable().ajax.reload(), perhaps you could help me answer my previous post. I was using the method as suggested but was receiving the error posted here: https://stackoverflow.com/questions/47418005/jquery-datatables-reload-interval-error - Please do enlighten me, if you would. — John Beasley, Nov 27 '17 at 20:32

score 1 · Answer 1 · answered Sep 06 '20 at 22:13

DOM elements have their current scroll state in elem.scrollLeft/scrollTop,further reading

try this code it rescued me.

var startPos = document.body.scrollLeft

 $(selector).DataTable().clear();
 $(selector).DataTable().ajax.reload(() => {

   document.body.scrollLeft = startPos;

  },false);

and for keeping maintaining vertical scroll state try this

 var startPos = document.body.scrollTop

 $(selector).DataTable().clear();
 $(selector).DataTable().ajax.reload(() => {

   document.body.scrollTop = startPos;

  },false);

https://stackoverflow.com/questions/19635188/why-is-body-scrolltop-deprecated — AlexTT, Nov 17 '20 at 14:34

score 0 · Answer 2 · answered Nov 27 '17 at 19:05

Using the DataTable().ajax.reload() will just init the datatable and then make it to reload on a interval (as you're doing currently)

 setInterval(function() {
   $('#example1').DataTable().ajax.reload(null, false);
 }, 5000);

$('#example1').DataTable({
  ajax: {
    url: "api/railmbs.php",
    type: 'POST',
    data: data,
    dataSrc: function(data) {
      return $.parseJSON(data);
    }
  },
  "columns": [{
      "data": "BILL"
    }, {
      "data": "CONTAINER"
    },
    // few more columns
  ],
  "iDisplayLength": 25,
  "paging": true,
  "scrollY": 550,
  "scrollX": true,
  "bDestroy": true,
  "stateSave": true,
  "autoWidth": true
});

As per DataTables Documents resetPaging (the second parameter on false)

Reset (default action or true) or hold the current paging position (false). A full re-sort and re-filter is performed when this method is called, which is why the pagination reset is the default action.

This means that neither the pagination(None than it matters if you have scrollY) nor the position of the scroll (X or Y) should reset.

No luck. Forgot I asked this question just the other day, using pretty much your example: https://stackoverflow.com/questions/47418005/jquery-datatables-reload-interval-error — John Beasley, Nov 27 '17 at 20:27
@JohnBeasley what exactly doesn't seem to work for you when using this way? As with that same exmple is working for me, at least that you're adding some different data or things, about the `TypeError: g is null` not really sure but it has to do with paging or sending some variable null to reload. — William-H-M, Nov 27 '17 at 20:48

jQuery Datatables prevent scroller reset on table reload

2 Answers2