jQuery DataTable Inline Editing

Question

I have been trying to implement simple Inline editing in jQuery Datatable. But I cannot activate the edit that happens on click on a row cell. I used the same code as in their site Link:

<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display">
    <thead>
        <tr>
            <th>Age</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

Datatable Binding:

    /* Init DataTables */
    var oTable = $('#Datatable').dataTable({
        "bProcessing": true,
        "sAjaxSource":"http://localhost:6220/DataSources/WCF/Data.svc/GetCustomer",
        "aoColumns": [
                            { "mDataProp": "Age" },
                            { "mDataProp": "Name" }
                     ]
    });

/* Apply the jEditable handlers to the table */              oTable.$('td').editable('http://localhost:6220/DataSources/WCF/Data.svc/SaveCustomer', {
                    tooltip: 'Click to edit...',
                    "callback": function (sValue, y) {
                        var aPos = oTable.fnGetPosition(this);
                        oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                    },
                    "submitdata": function (value, settings) {
                        return {
                            "row_id": this.parentNode.getAttribute('id'),
                            "column": oTable.fnGetPosition(this)[2]
                        };
                    },
                "height": "14px",
                "width": "100%"
            });

Any suggestions are highly appreciated.

Elliott · Accepted Answer · 2016-11-28 17:00:52Z

21

I built a plugin that'll do this for you in about two lines of code. It's small and pretty basic but gets the job done. The repo is here: DataTables CellEdit Plugin

The basic initialization is quick and easy:

oTable.MakeCellsEditable({
    "onUpdate": myCallbackFunction
});

myCallbackFunction = function (updatedCell, updatedRow) {
    console.log("The new value for the cell is: " + updatedCell.data());
}

Update: This has slowly been growing over the past few months and has quite a few more features than when I first posted this answer. Thanks to all the contributors out there pitching in!

edited Nov 28, 2016 at 17:00

answered Mar 28, 2016 at 16:15

Elliott

2,2551 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ROROROOROROR Over a year ago

your plugin is good, but it's not abstract enough, there's too little that can be configured.

Elliott Over a year ago

Thank you, I'm always happy to take feature requests on the github page (or better yet pull request! :-) )

Connie DeCinko Over a year ago

Looks great but I need the ability to add new records as well

Ksofiac Over a year ago

Love the plugin - but yes, definitely would love to see add new row/delete row options in the settings as well

Collectives™ on Stack Overflow

jQuery DataTable Inline Editing

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related