内联编辑 - 单击按钮保存新值

Question

我有以下 jQuery DataTables 代码：

Contact.DataTable = $('#otable').DataTable( {
"ajax": {
                "url" : '/Contact/' + Contact.id,
                "dataSrc": function(check) {
                      return check.data;
                },
             },
            "responsive": true,
            "columns": [
                { "data": "id"},
                { "data": "category", "sClass": "category" },
                { "data": "name", "sClass": "name" },
                { "data": "lname" },
                {
                      "render": function ( data, type, method, meta ) {
                       return Contact.saveContact(method);
                    }
                },
            ]
        } );

数据表-下拉-内联编辑：

$('#otable tbody').on('click', '.category', function () {    //second column
    var row = this.parentElement;
    if(!$('#otable').hasClass("editing")){
        $('#otable').addClass("editing");
        var data = Contact.DataTable.row(row).data();
        var $row = $(row);
         var thiscategory = $row.find("td:nth-child(2)");
        var thiscategoryText = thiscategory.text();
        thiscategory.empty().append($("<select></select>",{
            "id":"category" + data[0],
            "class":"in_edit"
        }).append(function(){
            var options = [];
            $.each(Categories, function(key, value){
                options.push($("<option></option>",{
                    "text":value,
                    "value":value
                }))
            })
            return options;
        }));
        $("#category" + data[0]).val(thiscategoryText)
    }
})

;

用于更改下拉列表中的值

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
            var val = $(this).val();
            $(this).parent("td").empty().text(val);
            $('#otable').removeClass("editing");
        });

以下代码用于在单击保存时保存新值（内联编辑后）：

$('#divsave').on("click", ".saveContact", function() {
        var data = Contact.DataTable.row($(this).closest('tr')).data();
        // Here I have to get new values after inline editing  - but getting old values
    });

我的问题是：单击编辑时，在“数据”中，我在数据表的行中获取旧值，而不是内联编辑后的修改值

数据表视图 - 1：

数据表 - 列中的下拉列表：

内联编辑后的数据表：

我需要什么：在单击“保存”图像时保存修改后的行 - 目前它在内联编辑之前保存旧值（数据表视图 - 1）

Answer 1

在使用 dataTables 时，通过“手动”操作 DOM <table> 或任何内容通常是一个非常糟糕的主意 - 您应该始终通过 dataTables API。

这就是你得到“旧值”的原因——你操纵了<table> 的内容，或者看起来是这样——dataTables 不知道这些变化。

在一个完美的世界中，您应该完全重构设置（即使用 API），但我想您可以通过在被更改的行上使用 invalidate() 来解决问题，以刷新数据表内部：

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
    var val = $(this).val();
    $(this).parent("td").empty().text(val);

    //add this line to refresh the dataTables internals
    Contact.DataTable.row($(this).parent("tr")).invalidate(); 
    //

    $('#otable').removeClass("editing");
});