Edit and Delete buttons are not working in Inline datatable

alpachadha

I am using inline datable with JSP code. Export and Create button are working fine But facing problem with edit and delete buttons. They are not giving me any pop up.

Error on console is:

dataTables.editor.min.js:494 Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

I have set up the id's for row and cols both.

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {  
    // Set up the editor    
     editor = new jQuery.fn.dataTable.Editor({
            "ajax": "/merlin/$cinfo.getSiteName()/FreseniusReportManager",
            "table": "#reports",        
            "idSrc": "id",
             "fields": [ {
                    "label": "Nomination Id:",
                    "name": "Nomination_Id"
                }, {
                    "label": "Nomination Date:",
                     "name": "Nomination_Date"
                }, {
                    "label": "Nominator:",
                     "name": "Nominator"
                }, {
                    "label": "Nominee :",
                     "name": "Nominee"
                }
            ]
 } );
       
      // Activate an inline edit on click of a table cell
    
     var table =   $('#reports').DataTable( {
        dom: 'Bfrtlip', //Look here for what this means: http://datatables.net/reference/option/dom
       // ajax: "/merlin/$cinfo.getSiteName()/FreseniusReportManager",    
        columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false
                    },
                    { data: "Nomination_Id", className: 'editable'  },
                    { data: "Nomination_Date", className: 'editable'},
                    { data: "Nominator" , className: 'editable' },
                    { data: "Nominee" , className: 'editable' },
                    { data: "Nominee_email" },
                    { data: "Nomination_Reason"},
                    { data: "Nomination_Message" }
                ],
         select: {
                    style:    'os',
                    selector: 'td:first-child'
                },
         buttons: [
                      {
                          extend: 'excel',
                          text: 'Export to Excel',
                        
                      },
                      { extend: 'create', editor: editor },
                      { extend: 'edit',   editor: editor },
                      { extend: 'remove', editor: editor }

            ]
   } );
     $('#reports').on( 'click', 'tbody td.editable', function (e) {     
         
           editor.inline( this );       
        } );
     

} );
</script>

JSP/VTL Code

 <table id="reports" class="table table-striped table-responsive bump desktopTable" >
        <thead>
            <tr>
                        <th></th>
                        <th>Nomination Id</th>
                        <th>Nomination Date</th>
                        <th>Nominator</th>
                        <th>Nominee</th>
                        <th>Nominee E-mail Address</th>
                        <th>Nomination Reason</th>
                        <th>Nomination Message</th> 
            </tr>
        </thead>
       
       <tbody>
                    #if ($report && $report.size() > 0)
                        #foreach( $row in $report )     
                            <tr id="$!row.getNominationId()">
                                <td></td>
                                  #set ($email_address = "")
                                         #set ($email_address = $!row.getNominationEmailId())
                                         #if ($email_address.length() > 0)
                                            #set ($email_address = "<a href='mailto: $email_address'>$email_address</a>")
                                    #end
                                    #set ($nomination_date = $!row.getNominationDate())
                                    #set ($nomination_date = $vtool.formatDate("$nomination_date", "MM/dd/yyyy"))
                                      #if ($nomination_date == "01/01/3000")
                                          #set ($nomination_date = "")
                                      #end
                                 <td Nomination_Id="$!row.getNominationId()">$!row.getNominationId()</td>
                                 <td Nomination_Date="$!nomination_date">$!nomination_date</td>
                                 <td Nominator="$!row.getNominatorName()">$!row.getNominatorName()</td>
                                 <td Nominee="$!row.getNomineeName()">$!row.getNomineeName()</td>
                                 <td Nominee_email="$!email_address">$!email_address</td>
                                 <td Nomination_Reason="$!row.getNominationReason()">$!row.getNominationReason()</td>
                                 <td Nomination_Message="$!row.getNominationMessage()">$!row.getNominationMessage()</td>
                            
                            </tr>
                        #end
                    #end                                      
                </tbody>
    </table>

allan

"idSrc": "id",

Could you try changing that to be idSrc: 'DT_RowId' please. The information is being read form the DOM, so DataTables will read it into that property by default.

Allan

alpachadha

rowId: "id", i used this , and it started working