Using Jquery datatable jeditable without mandatory

2019-06-21 04:00发布

问题:

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] );
     },
});

回答1:

I took the Jeditable (or jEditable) example on datatables.net 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%"}
    });
});