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

Question

我有以下 jQuery 数据表的代码：

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

我的问题是：单击编辑时，在 'data' 中，我得到的是数据表行中的旧值，而不是内联编辑后的修改值

数据表视图 - 1:

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

内联编辑后的数据表：

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

Answer 1

在使用数据表时，通过 "hand" 操作 DOM <table> 或任何内容通常是一个非常糟糕的主意 - 您应该始终浏览数据表 API .

这就是您得到 "old values" 的原因 - 您已经操纵了 <table> 的内容，或者看起来如此 - dataTables 不知道这些更改。

在理想情况下，您应该完全重构设置（即使用 API），但我想您可以使用 invalidate()[=22= 来解决问题] 在正在更改的行上以刷新 dataTables 内部结构：

$('#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"); });

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

Inline editing - save new values on button click

javascript

ajax

save

datatables

inline-editing