jQuery DataTable - Add new row works, but not able to make it editable (jeditable)

Question

I'm having a PHP page where I'm using a DataTable(jQuery) plugin to display all the data from the database.

Here I want to give the User the option to add new row, ie a new record for the user to enter data. I followed the example at:

http://www.datatables.net/examples/api/add_row.html

and was able to create a new row.

But I'm totally not sure on how to add the "id" property for the being generated and also, I'm not sure on how to make it editable.

As of now, all the other fields are editable using jeditable.
The code is as follows:

            $(document).ready(function() {
            /* Init DataTables */
            var oTable = $('#example').dataTable({
            "iDisplayLength": 5,
            //"bRetrieve": true,
            "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]]
            }
            );


            /* Apply the jEditable handlers to the table */
            $('td', oTable.fnGetNodes()).editable( 'expenseFieldsUpdater.php', {
                "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],
                        "form_id": document.getElementById('formID').value
                    };
                },
                "height": "14px"
            } );
        } );

        var giCount = 1;
        function fnClickAddRow() {
            $('#example').dataTable().fnAddData( [
                ".1",
                giCount+".2",
                giCount+".3",
                giCount+".4",
                giCount+".5" ] );
                    giCount++;
        }

But then, I'm totally not sure on how to go about making it editable. Any pointers would be very helpful.

I found the following post in the datatables site, but was not able to understand on how to go about making them work:
http://datatables.net/forums/comments.php?DiscussionID=181

Answer 1

You can find a plugin that can help you on the http://code.google.com/p/jquery-datatables-editable/ . This plugin enchances standard JQuery DataTables plugin and handles add, delete, and edit actions. You can download HTML example there.

Answer 2

I typically find I need to re-run $(document).ready events that decorate table rows after I add or edit rows. So you should probably refactor out the call to:

$('td', oTable.fnGetNodes()).editable()

into a separate method that you can call from $(document).ready and from fnClickAddRow().