Geek Answers Handbook

JQuery DataTable - adds a new row, but cannot make it editable (jeditable)

I have a PHP page where I use the DataTable plugin (jQuery) to display all the data from the database.

Here I want to give the User the opportunity to add a new line, that is, a new entry for user input. I followed an example:

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

and was able to create a new line.

But I'm completely not sure how to add the id property for the created one, and also, I'm not sure how to make it editable.

At the moment, all other fields are edited 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 completely unsure how to do the editing. Any pointers would be very helpful.

datatables, , :
http://datatables.net/forums/comments.php?DiscussionID=181

+5
2

, http://code.google.com/p/jquery-datatables-editable/. JQuery DataTables , . HTML.

+2

, $(document).ready, . , , :

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

, $(document).ready fnClickAddRow().

+1

More articles:


All Articles