How can you use jquery.datatable and the jeditable plugin without a url. I just want edit functionality without saving to the server. This is what I've tried:

$('td', oTable.fnGetNodes()).editable(function(value, settings) { 
    console.log(this);
    console.log(value);
    console.log(settings);
    return(value);}, { 
       type    : 'textarea',
       submit  : 'OK',
       callback: function( sValue, y ) {
           var aPos = oTable.fnGetPosition( this );
       oTable.fnUpdate( sValue, aPos[0], aPos[1] );
     },
});

How can you use jquery.datatable and the jeditable plugin without a url. I just want edit functionality without saving to the server. This is what I've tried:

$('td', oTable.fnGetNodes()).editable(function(value, settings) { 
    console.log(this);
    console.log(value);
    console.log(settings);
    return(value);}, { 
       type    : 'textarea',
       submit  : 'OK',
       callback: function( sValue, y ) {
           var aPos = oTable.fnGetPosition( this );
       oTable.fnUpdate( sValue, aPos[0], aPos[1] );
     },
});

• javascript
• jquery
• datatables
• jeditable

• @Christopher Pfohl: As I understand your bounty ment, my example on jsfiddle is what you are looking for. Is there anything missing? – Wolfram Commented Jul 17, 2012 at 12:50
• @Wolfram no, that's exactly it! Thanks – Chris Pfohl Commented Jul 17, 2012 at 17:15

1 Answer 1

I took the Jeditable (or jEditable) example on datatables and modified it based on what Golden Bird provided in the question and what the Jeditable docs say on this topic. To test, you may edit any value in the grid, the sorting applies at once and everything else datatables-related works as well (e.g. searching for the new value).

• Example using (implicit) "type" : "textarea"

• Example using "type" : "select"

$(document).ready(function() {
    var oTable = $('table').dataTable();

    var theCallback = function(v, s) {
        // Do something with the new value
        return v;
    };
    $(oTable).find('td').editable(theCallback, {
        "callback": function(sValue, y) {
            var aPos = oTable.fnGetPosition(this);
            oTable.fnUpdate(sValue, aPos[0], aPos[1]);
        },
        "data": "{'0':'0%', '.1':'10%', '.15': '15%', '.2': '20%', 'selected':'0'}",
        "type" : "select",
        "submit" : "OK",
        "style": {"height": "100%","width": "100%"}
    });
});