datatablesEditableCell.js

$(document).ready(function(){

	  // datatables init
    var table = $('#example').DataTable();

    // global variable
    document.inputLock = false;
    
    $('#example tbody').on('click', 'td', function () {
        
        // check if the page is editing.
        if (document.inputLock == false){
            
            // get the cell's data
            var data = table.cell(this).data();

            // create the input textbox and mark the cell with .edited
            $(this)
              .addClass('edited')
              .wrapInner("<input value='"+data+"'>");

            // lock the page from further editing
            document.inputLock = true;
        }
    });
    
    // remove input textbox with mouse click
    $(document).on('click', function(e){ 
        // check if the clicked element is table or the input, ignore
    	if(!$(e.target).is('td') && !$(e.target).is('input')){

            // change the dataTable's cell data, automatically remove the input
            var data = table.cell($(".edited").get()).data($(".edited input").val());

            // remove the edited cell's mark
            $(".edited").removeClass('edited');

            // release the page input lock
    		document.inputLock = false;
    	}
    });

    // remove input textbox with keyboard (esc and enter)
    $(document).keypress(function(e) {
        // get the keypress code
        code = e.keycode || e.which;

        // check if the lock is on, and keypress is enter (13) or esc (0)
    	if((code == 13 || code == 0) && document.inputLock == true){
    		// change the dataTable's cell data, automatically remove the input
            var data = table.cell($(".edited").get()).data($(".edited input").val());
            
            // remove the edited cell's mark
            $(".edited").removeClass('edited');

            // release the page input lock
    		document.inputLock = false;
    	}
    });
});