Question

我正在使用datatables插件来显示从服务器检索的内容。我使用下拉列表显示用户可以选择的内容。当用户进行第一次选择时，我使用.change（function（e）{}从select中获取输入。然后为了使用相关选项填充第二个下拉列表，我将使用.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);
}

无法使用scrollTop（）来处理数据表.draw（）

1 个答案: