Need to add a new row at the end of the data table

siva12

Hi Team,

I have a data table which is related to comments. on click of a button i am showing this table, in this table i have a requirement to add a new comment through the table..., i mean to say i have to add a new row at the end of the table which is content editable, on click of 'enter' key we need to save the table in data base and need to enter a new row again to add new comment.

The code as follows, could you please have a look and let me know if i am missing anything here.. i am able to see on initial load of the table i have the last row added but after editing the last field and clicked enter, i am not getting any new row at the end.

    function displayComments(issueKey){     
                var commentsTable = $("#tbl_tmfxCommentHistory").dataTable({
                    "bJQueryUI" : true,
                    "sPaginationType": "full_numbers",
                    "sDom": 'rt<"bottom"lip><"clear">', 
                    "bStateSave": true,
                    "processing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bSortable": true,
                    "bSortClasses": false,
                    "sEmptyTable": true,
                    "scrollY": "310px",
                    "scrollCollapse": true,
                    "bAutoWidth": true,
                    "bFilter": false,
                    "bJQueryUI" : true,
                    "bPaginate": false,
                    "bInfo": false,
                    "bSort":false,
                    "ajax":{
                        "url": "/bbct/edd/getComments/"+issueKey,
                        "type":"POST",
                        "dataType" : "json",
                        "error": function(xhr, textStatus, error){

                            }
                    },
                    "aoColumns": [{
                        "sTitle": "Comment Date",
                        "mData": "commentDate",
                        "fnRender": function(obj) {
                            return obj.aData.commentDate;
                        },
                    }, {
                        "sTitle": "Comment Author",
                        "mData": "commentAuthor",
                        "fnRender": function(obj) {
                            return obj.aData.commentAuthor;
                        },
                    },   {
                        "sTitle": "Comment Text",
                        "mData": "commentText", 
                        "mRender": function(source, type, val) {
                                return  val.commentText;
                        },
                    }
                    ],
                    "fnInitComplete":function(){
                        //adding new row at the bottom
                        commentsTable.fnAddData({'commentAuthor':$('#username').text(),'commentDate':dateFormatter(),'commentText':'Add new comment...'});
                        $('#tbl_tmfxCommentHistory tbody tr:last-child').addClass('add-new');
                        $('#tbl_tmfxCommentHistory tbody tr:last-child td:last-child').prop('contentEditable',true);
                        initCommentEventHandling($('.add-new td').last());
                    }
                });
                
                function initCommentEventHandling(element) {
                    $(element).click(function() {
                      var row = $('tr.add-new');
                      row.removeClass('add-new');

                      $(this).on('keypress', function(event) {
                        if (event.which === 13 && event.shiftKey === false) {
                            $(this).prop('contenteditable', false).off('keypress').off('click');
                            commentsTable.fnAddData({'commentAuthor':$('#username').text(),'commentDate':dateFormatter(),'commentText':'Add new comment...'});
                            $('#tbl_tmfxCommentHistory tbody tr:last-child').addClass('add-new');
                            $('#tbl_tmfxCommentHistory tbody tr:last-child td:last-child').prop('contentEditable',true);
                            initCommentEventHandling($('.add-new td').last());
                          return false;
                        }
                      });

                      if ($(this).text() === 'Add new comment...') {
                        $(this).text('');
                      }
                      $(this).focus();
                    });
                 };
        
    }