Inline edit not changing values immediately on losing focus.

Hello,

I have an inline editor that changes the datasource (Localstorage) but does not change immediately. Only when I reload the page does the change reflect. My gut feeling is that I should be puting a draw function somewhere but I dont know where exactly.

Before

On Inline edit

After I remove the focus from edit field

After I refresh the whole page

The code for my inline editor looks like this

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

And my editor

editor = new $.fn.dataTable.Editor( {
table: "#sales_table",
fields:
    [
        {
            label: "Quantity:",
            name: "so_quantity"
        }
    ],
ajax: function ( method, url, d, successCallback, errorCallback )
    {

        var output = { data: [] };

        if ( d.action === 'edit' ) {

             // Update each edited item with the data submitted

            $.each( d.data, function (id, value) {
                value.DT_RowId = id;
                $.extend( sales_local_data[ id ], value );
                output.data.push( sales_local_data[ id ] );
            } );


        }

        // Store the latest `todo` object for next reload
        localStorage.setItem( 'sales_local_data', JSON.stringify(sales_local_data) );


        // Show Editor what has changed
        successCallback( sales_local_data );

    }
});