Question

我已成功使用以下代码向数据表添加行：

工作的：

var serversTable = $('#datatable-table').dataTable().api();

var serverRowTemplate = Handlebars.compile($('#serverRowTemplate').html());

var $row = $(serverRowTemplate(data.results[r]));

serversTable.row.add($row).draw(false);

但是当我尝试使用类似的方法更新（替换）一行时，我没有运气。我也尝试过使用fnUpdate，但我似乎无法找到通过jQuery对象基本上替换/更新现有行的正确方法。以下是无法更新表的代码：

不起作用：

var serversTable = $('#datatable-table').dataTable().api();

var oldRow = $('#dashboardTemplateContainer tr[data-tag="'+ data.results[r].tag + '"]'); // select the row i'm looking for

var serverRowTemplate = Handlebars.compile($('#serverRowTemplate').html()); //compiles the handlebars template. i need this template as i have a lot of conditionals etc. 

var $row = $(serverRowTemplate(data.results[r])); // turning the template into a jQuery object worked for the row.add() function in the above example.

serversTable.rows(oldRow).data($row).draw(false); // replace the old row with the new row. doesn't work.

有什么建议吗？

Answer 1

API方法rows().data()只能用于检索数据。请改用row().data()来设置行的数据。

但是，您将无法使用<TR>节点的jQuery对象来更新行的数据。在这种情况下，您最好的选择是删除row().remove()行并重新添加它，如果您拥有的是<TR>节点。

Answer 2

如果您在处理程序和更新事件中使用ajax，请按照以下步骤操作：

首先在成功回拨

tr

然后，在您的回复中，附加一个AllColumnsData对象并填写更新数据。

function clickHandler(e) {
    var tid = $(this).data("tid");
    var currentTR = $(this).closest("tr");
    $.ajax({
        type: "GET",
        url: "/api/data/get/?tid=" + tid,
        success: function (data) {
            dt1.row(currentTR).data(data.Data3); 
        }
    });
}

Answer 3

$(document).ready(function () {
    $('#add-new').on('click',function(){
        var rData = [
            test1,
            test2,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
         $('#dataTable').DataTable().row.add(rData).draw(false);
    });

   $('#dataTable').on('click', '.update', function () {
        var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        var rData = [
            test1,
            test2,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
        pageParamTable
                .row( tableRow )
                .data(rData)
                .draw();
    });
    $('#dataTable').on('click', '.delete', function () {
       var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        pageParamTable.row( tableRow ).remove().draw();
    });
});

我认为此代码会对您有所帮助。

jQuery DataTables - 使用jQuery对象替换/更新行。或者fnUpdate

3 个答案: