jQuery Datatables 防止在重新加载表时重置滚动条

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

Answer 2

使用DataTable().ajax.reload() 只会初始化数据表，然后让它在一定时间间隔内重新加载（就像你目前所做的那样）

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

根据DataTables DocumentsresetPaging（第二个参数为false）

重置（默认操作或true）或保持当前分页位置 （错误的）。当此方法被执行时，将执行完整的重新排序和重新过滤 调用，这就是为什么分页重置是默认操作。

这意味着分页（如果您有scrollY，则无关紧要）和滚动位置（X 或 Y）都不应重置。