Inline editing - save new values on button click

问题

I have following code for 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);
                    }
                },
            ]
        } );

Datatable - dropdown - inline edit:

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

;

For changing values in dropdown

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

Below code for saving new values(after inline edit) while clicking save:

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

My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit

datatable view - 1:

datatable - dropdown in column:

datatable after inline editing:

What I need: Save modified row while clicking 'save' image - currently it saves older value before inline editing(datatable view - 1)

回答1:

When using dataTables it is generally a very bad idea to manipulate the DOM <table> or any content by "hand" - you should always go through the dataTables API.

Thats why you are getting "old values" - you have manipulated the content of the <table>, or so it seems - dataTables are not aware of those changes.

In a perfect world you should refactor the setup completely (i.e to use the API) but I guess you can solve the issue by using invalidate() on the row being changed in order to refresh the dataTables internals :

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

来源：https://stackoverflow.com/questions/32005995/inline-editing-save-new-values-on-button-click

标签

javascript

ajax

save

datatables

inline-editing