Question

Can someone help me to make editable cell “visible”, so it could be clear it can be edited? Right now it looks like a simple text and nothing visually suggests, that it can be edited…I´d like to make it look like a standard text field.

Answer 1

This should work:

 var oTable = $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "/url/",
    "fnDrawCallback": function () {
        $('#example tbody td').editable( 'url', { // simple editable initialization
          "height": "14px",
        }); 

        $('#example tbody tr').each(function() {  
            $.each(this.cells, function(){
                $(this).click()  //by default all td's have bind for click function, so we simulate clicks for every td
            });
        });

        $('#example tbody td input').live('click', function(){
            $(this).select() // to select input
        })
     }
 });
  $.editable.types.defaults.reset = function (){   //this function disables reset input editing after submiting

  }

UPDATE:

I made a test sample here http://jsfiddle.net/94BZV/31/

Don’t forget to put correct url in init of editable to get correct answer passed back to edit field.