问jQuery Datatables防止在表重载时重置滚动条
EN

Stack Overflow用户

提问于 2017-11-27 17:06:56

回答 2查看 2.8K关注 0票数 1

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

我要阻止这一切的发生。

我已经尝试了这篇文章中的所有答案：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');
    }
  });
}

javascript

jquery

ajax

datatables

回答 2

Stack Overflow用户

发布于 2020-09-06 22:13:46

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

票数 1

Stack Overflow用户

发布于 2017-11-27 19:05:22

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