Question

我终于让我的数据表按间隔重新加载。但我现在注意到的是，如果你向右滚动，表重新加载会将滚动重置回左侧。如果向下滚动，它将重置为顶部。

我需要阻止这种情况发生。

我已尝试过这篇文章中的所有答案：How to maintain jQuery DataTables scroll position after .draw()

似乎没什么用。也许我错过了什么。

我在这篇文章中注意到，问题是使用了datatables.scroller.min.js：DataTables save state scroll position

这导致我：https://cdn.datatables.net/scroller/1.4.2/

但那里有很多CSS文件。我不确定使用哪一个，如果有的话应该使用。

也许我不需要上面的任何一个，我只需要调整下面的代码以防止滚动重置发生：

点击活动：

$('.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'); 
    }
  }
});

数据表：

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');
    }
  });
}

Answer 1

DOM元素在elem.scrollLeft/scrollTop，further reading

中具有当前滚动状态

尝试使用此代码，它救了我。

var startPos = document.body.scrollLeft

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

   document.body.scrollLeft = startPos;

  },false);

为了保持垂直滚动状态，请尝试

 var startPos = document.body.scrollTop

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

   document.body.scrollTop = startPos;

  },false);

jQuery数据表阻止表重新加载时重置滚动条

1 个答案: