无法让 scrollTop() 与数据表 .draw() 一起使用

Question

我正在使用数据表插件来显示从服务器检索的内容。我正在使用下拉菜单来显示用户可以从中选择的内容。当用户进行第一次选择时，我使用 .change(function(e) {} 从选择中获取输入。然后为了使用相关选项填充第二个下拉列表，我使用 .fnDeleteRow() 删除该行, 并绘制一个新行，将第一个选择显示为只读字符串，并且第二列填充了基于第一个选择的下拉列表。

首先，这工作正常，我不需要任何帮助来显示每一行中的正确内容。当我在任何下拉菜单上进行选择时，问题就来了，页面刷新并跳转到顶部。我创建了一个我认为应该解决跳转到顶部问题的函数，但由于某种原因它没有做任何事情。我想知道是否有人在使用数据表特别是 .draw() 函数时保持 scrollTop() 相同的经验。

我创建的函数如下所示：

function saveScrollPosition() {
    var scrollPosition = $('#tblLineItems').scrollTop();
}

function setScrollPosition() {
    $('#tblLineItems').scrollTop(scrollPosition);
}

我不知道缺少什么，因为我正在保存滚动位置，然后在我使用的每个 .draw() 之后设置它。

我也像这样初始化数据表：

$(document).ready(function() {
    myTable = $('#tblLineItems').dataTable({
    //some stuff
    })
});

这里是我调用 saveScrollPosition() 和 setScrollPosition() 的地方：

function addSelectCriteria() 

newSelectCriteriaCtr++;

saveScrollPosition();

var lineId = "newSelectCriteria_"+newSelectCriteriaCtr;
var addData = [];

addData.push('<td><input type="checkbox" id="'+lineId+'"/></td>');
addData.push("<select style='width:150px' value='1' name='selectMfg' id='"+lineId+"_mfg'>"+selectMfgs+"</select>");
addData.push("<select style='width:150px'</select>");
addData.push("<select style='width:150px'</select>");
addData.push("<td><a href='' class='btn btn-blue'><img src='../img/btn/btn-blue-med-icn-forward.png' alt='Print'>Print Barcode</a></td>");
addData.push("<td class='controls'><a class='delete' id='deleteIcon_"+lineId+"'>Delete</a><input type='hidden' id='deleteHiddenInput_"+lineId+"' value='false'></td>");

myTableAPI.row.add(addData).draw();

setScrollPosition();

console.log(newSelectCriteriaCtr);

$("select[name='selectMfg']").change(function(e) {  

    saveScrollPosition();

    var mfg = $("select[name='selectMfg']").val();
    var addData = [];

    myTable.fnDeleteRow(newSelectCriteriaCtr);

    addData.push('<td><input type="checkbox" id="'+lineId+'"/></td>');
    addData.push("<td>"+mfg+"</td>");
    addData.push("<select style='width:150px' value='2' name='selectBldg' id='"+lineId+"_bldg'>"+selectBldgs+"</select>");
    addData.push("<select style='width:150px'</select>");
    addData.push("<td><a href='' class='btn btn-blue'><img src='../img/btn/btn-blue-med-icn-forward.png' alt='Print'>Print Barcode</a></td>");
    addData.push("<td class='controls'><a class='delete' id='deleteIcon_"+lineId+"'>Delete</a><input type='hidden' id='deleteHiddenInput_"+lineId+"' value='false'></td>");

    myTableAPI.row.add(addData).draw();

    setScrollPosition();

    console.log(newSelectCriteriaCtr);      

Answer 1

解决了这个问题。我使用的是类而不是控制滚动条的 div。

function saveScrollPosition() {
    var scrollPosition = $("div.dataTables_scrollBody").scrollTop();
}

function setScrollPosition() {
    $("div.dataTables_scrollBody").scrollTop(scrollPosition);
}