jeditable / DataTables - How can I refresh table after edit?

I am currently using DataTables for a project along with the jeditable plugin.
My table renders beautifully.
I can edit and save values in cells.
My table on the database gets updated correctly.

But after I update the cell I get 'Click to Edit' in the cell and the new value is not visible until I refresh the page. I have been scouring the web trying to get fnDraw and some other things to work but I am unable to figure it out, I am pretty new to jQuery, am a PHP developer.

The only thing I need it to do is re-draw the table after the values are submitted.
Here is my code:

$(document).ready(function() {
	/* Init DataTables */
	var oTable = $('#district').dataTable();
	
	/* Apply the jEditable handlers to the table */
	$('#district', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
		tooltip   : 'Click cell to edit value...',
		indicator : 'Saving...',
        style   : 'display:block;',
		 submit    : 'OK',
         cancel    : 'Cancel',
		 data   : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}",
		 type    : 'select',
		"Callback": function( sValue, x) {
			var aPos = oTable.fnGetPosition( this );
			oTable.fnUpdate( sValue, aPos[0], aPos[1]);
			
            /* Redraw the table from the new data on the server */
			oTable.fnClearTable( 0 );
			oTable.fnDraw();
		},
		"submitdata": function ( value, settings ) {
			var aPos2 = oTable.fnGetPosition( this );
			var id2 = oTable.fnGetData( aPos2[0] ); 
			return {
				"row_id": this.parentNode.getAttribute('id'),
			    "id2": id2[0],
				"column": oTable.fnGetPosition( this )[ 2 ]			
			};
		},
		"height": "14px",
	} );
} );