jQuery Datatables防止在表重载时重置滚动条
我终于让我的数据表每隔一段时间重新加载一次。但我现在注意到的是，如果你向右滚动，表重载会将滚动重置回左侧。同样，如果向下滚动，它将重置回顶部。
我要阻止这一切的发生。
我已经尝试了这篇文章中的所有答案：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');
}
});
}回答 2
Stack Overflow用户
发布于 2020-09-07 06: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);Stack Overflow用户
发布于 2017-11-28 03: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
});根据DataTables文档resetPaging (false上的第二个参数)
重置(默认操作或true)或保持当前分页位置(false)。调用此方法时，将执行完整的重新排序和重新筛选，这就是为什么分页重置是默认操作的原因。
这意味着，无论是分页还是滚动的位置(X或Y)都不应该重置(如果您有scrollY，这一点也不重要)。
https://stackoverflow.com/questions/47516285
复制相似问题
腾讯云开发者
