jquery - 替换行时无法使 jQuery DataTable 中的数据无效

Question

我有一个小的 jQuery 数据表，它定期逐一更新它的行。这是通过用“更新”行替换该行、回调服务器、以 html 形式接收返回的行，然后用服务器提供的新 html 替换“更新”行来完成的。这有效，用户会看到更新的信息出现。

但是，如果用户随后单击列标题，则表中的行将返回到更新过程中几毫秒的“正在更新”状态。

下面是我正在检索行并尝试使其内容无效的 JavaScript，以便 DataTables 对该行的最新 ReplacedWith() 版本进行排序(并在排序后显示)。

function getRow(svcName, rowId)
{
    // Mark in progress
    $("#" + rowId).html("<td colspan='5'>" + svcName + "<i class='fa fa-refresh fa-spin fa-1x fa-fw'></i></td>").addClass('info');

    // Get the HTML
    $.ajax(
        {
            type: 'get',
            dataType: 'html',
            url: svcName,
            error: function (jqXHR, textStatus, errorText) {
                $("#" + rowId).text("Error " + errorText + " (" + svcName + ")");
                var row = $(".service-table").DataTable().row("#" + rowId);
                row.invalidate('dom');
            },
            success: function (response, textStatus, jqXHR) {
                // This response is visible in the table 
                // UNTIL I sort the table, at which time it's the temporary 
                // version of the row, above, which is restored 
                // from the dataTable cache.
                $("." + rowId).replaceWith(response);
                var row = $(".service-table").DataTable().row("#" + rowId);
                row.invalidate('dom');
                //row.draw('row');
            }
        }
    );

}

如何强制 dataTable 知道我已替换该行？

更新:我已经按照 RickL 的答案中的建议更新了代码，但看到了类似的行为:

function getRow(svcName, rowId)
{
    // Mark in progress
    $("#" + rowId).html("<td colspan='5'>" + svcName + "<i class='fa fa-refresh fa-spin fa-1x fa-fw'></i></td>").addClass('info');

    // Get the HTML
    $.ajax(
        {
            type: 'get',
            dataType: 'html',
            url: svcName,
            success: function (response, textStatus, jqXHR) {
                var table = $(".service-table:first").DataTable();
                // get the index
                var rowIndex = table.row("#" + rowId).index();
                // get the jQuery representation of the row and replace
                var $row = $(table.row(rowIndex).node());
                $row.replaceWith(response);
                table.row(rowIndex).invalidate(); //.draw(false);
            }
        }
    );

}

Answer 1

由于问题中现在的评论和引用，我将发布另一个答案(带评论):

function getRow(svcName, rowId) {
    // Get row
    var selectedRow = $("#" + rowId);
    // Set row as in progress
    selectedRow.html("<td colspan='5'>" + svcName + "<i class='fa fa-refresh fa-spin fa-1x fa-fw'></i></td>").addClass('info');
    // Get replacement HTML
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: svcName,
        success: function (response, textStatus, jqXHR) {
            // Get table
            var table = $("#grid").DataTable();
            // Get row index
            var rowIndex = table.row(selectedRow).index();
            // Change row html
            selectedRow.html($(response).html());
            // Iterate, update and reset each cell in the row
            // (this preserves sorting with new data)
            $.each(selectedRow.find("td"), function (i) {
                table.cell(rowIndex, i).data($(this).html()).draw();
            });
        }
    });
}

对此进行测试，我发现通过这种方法，当单元格本身更新时，表列的排序会以这种方式保留(这是一件好事)。