How to send an ajax request on cell change?

vohom001

I'm trying to build an example where the site sends an ajax request back to the server after a <td> element has been changed through "inline()" edit. I can send an entire row back to the server using the "fields" option but I would like to just send the cell which was changed, and update the table with the new value, how can one do this?

In other words, what I'm trying to send to the server is the new value of a cell and its exact position (row and column).

Secondly, the ajax option in Editor initilization on its own works fine for a row but I'm having trouble getting the function form of ajax to work, see code below:

function success(json){
    console.log("success");
}

function error(xhr, error, thrown){
console.log("error");
}

var editor = new $.fn.dataTable.Editor({
table: "#table_id",

ajax: function ( method, url, data, success, error ) {
        $.ajax( {
            type: "POST",
            url:  ajax_url, //points to my server
            data: data,
            dataType: "json",
            success: function (json) {
                success(json);
            },
            error: function (xhr, error, thrown) {
                error(xhr, error, thrown);
            }
        } );
    },

    fields: [{
        label: "Test 1",
        name: 0
    },
    {
        label: "Test 2",
        name: 1
    },
    {
        label: "Test 3",
        name: 2
    }
    ]

});

cDataTable = $('#table_id').DataTable({
    "paging": true,
    "autoWidth": false,
    "dom": "Tfrtip",
    "tableTools": {
        sRowSelect: "os",
        sRowSelector: "td:first-child",
        aButtons: [
            {   sExtends: "editor_edit", editor: editor }
        ]
    },
});

$('#table_id').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});

Thank you