Question

我有一个小的jQuery Datatable，可以逐个定期更新它的行。这是通过将行替换为“Updating”行，回调到服务器，将行作为html接收回来，并用新服务器提供的html替换“Updating”行来完成的。这有效，用户会看到更新后的信息。

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

这是我正在检索该行并试图使其内容无效的javascript，以便DataTables将排序（并在排序后显示）该行的最近被替换的（）版本。

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

}

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

更新：我已经按照RickL的回答更新了代码，但看到了类似的行为：

catci.i

Answer 1

我并不完全清楚你正在尝试做什么＆＃34;更新＆＃34;你似乎有两种方法可以选择有问题的行（类和id），但是其他方式：

// Get reference to table
var table = $(".service-table:first").DataTable();
// Get reference to row index (NOTE you have both
// ("." + rowId) and ("#" + rowId) referenced ? This assumes id selector)
var rowIndex = table.row("#" + rowId).index();
// Get jQuery representation of row
var $row = $(table.row(rowIndex).node());
// Replace jQuery representation of row
$row.replaceWith(response);
// Invalidate DataTables representation of the row data
// and redraw (with false parameter to keep table the same)
table.row(rowIndex)
    .invalidate()
    .draw(false);

我还没有对它进行测试（没有进一步的代码细节），但希望逻辑能够在那里进行测试。

Answer 2

由于问题中现在有评论和引用，我将发布另一个答案（附评论）：

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

测试这个，我发现通过这种方法，表格列的排序以这种方式保留（这是一件好事），因为单元格本身已更新。

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

2 个答案: