Question

I am new to jquery and datatable.
I have developed the editable datatable for “contacts”, where each row represents a contact.
Each “contact” has some “actions” associated with them.

When the user clicks on a particular “contact” the associated “actions” are displayed as additional rows under that particular contact.

Now I want to make both the “contact” row and the “action” rows editable. I have used “jEditable” plugin and can get the “contact” row as editable and not the “action”.
Any idea, or help will be greatly appreciated.

userInfo = "<table id='mycontacttable'><thead><tr><th></th><th>FirstName</th><th>FamilyName</th></tr></thead><tbody> ";
              /*constructing the Contact table, at this stage without the actions.*/
              for(i =0 ; i < response.result.length ; i++){
                  var contactid=response.result[i].contactID;
                  userInfo += "<tr><td>"+ 
                  "<img src=\"../javascript/datatables/media/images/details_open.png\" rel="+contactid+" alt=\"expand/collapse\"></td>"+
                  "<td>"+ response.result[i].givenName + "</td><td>" + response.result[i].familyName+"</td></tr> ";
              }
              userInfo +=  "</tbody></table> ";



              $('#info').html("The following are your contacts. " + userInfo);

              /*setting the sortable and unsortable columns*/
              oTable= $('#mycontacttable').dataTable({
                  "iDisplayLength": 25,

                  "bSort": true,

                  "aoColumns": [ 
                                { "bSortable": false },//Disable sorting on this column
                                null,
                                null

                                ]
              }).makeEditable();


              /*clicking a particular row in the table mycontacttable, and assigning the click event*/
              $('#mycontacttable tbody td img').live("click",function () {

                  var nTr = this.parentNode.parentNode;
                    if (this.src.match('details_close')) {
                        /* This row is already open - close it */
                        this.src = "../javascript/datatables/media/images/details_open.png";
                        oTable.fnClose(nTr);
                    }
                    else {
                        /* Open this row */
                        this.src = "../javascript/datatables/media/images/details_close.png";
                        var contact_id = $(this).attr("rel");/*contact id of a particular row that is clicked is stored in the variable contact_id*/

                        /*creating a sub table*/
                        action_sub_table = "<table id='submycontacttable'>"
                        for(i =0 ; i < response.result.length ; i++){
                              var contactid=response.result[i].contactID;
                              if(contact_id==contactid){
                                /*Iterating through each action of the contact, and constructing a sub table row for it*/
                                    for(count=0;count<response.result[i].actionSet.length;count++){
                                        action_sub_table += "<tr><td>"+response.result[i].actionSet[count].actionID+" </td><td>"+
                                                               response.result[i].actionSet[count].actionDueDate+"</td><td>" +
                                                            response.result[i].actionSet[count].actionNote+"</td></tr>";

                                    }   
                              }
                        }
                        action_sub_table +="</tablr>"; /*Construction of the subtable complete*/

                        oTable.fnOpen(nTr, action_sub_table, "info_row" );
                    }

                });

Answer 1

you can try jqGrid instead, I suppose that would be perfect in your case http://www.trirand.com/blog/