Inline datatable editing doesn't support Java/servlet in place of PHP?

alpachadha

I am trying to developed the inline functionality using data table, which i have downloaded for 15 days trial version.
In place of PHP , i want to use servlet. Below is my JSP code , it is giving me error undefined syntax error at "editor = new $.fn.dataTable.Editor({" this line.

<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/jquery-ui-1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/dataTables.editor.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.jqueryui.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.jqueryui.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.foundation.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.foundation.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.bootstrap.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>

<script language="javascript" type="text/javascript">

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {  
    // Set up the editor
     editor = new $.fn.dataTable.Editor({
            "sAjaxSource": "/merlin/$cinfo.getSiteName()/FreseniusReportManager",
            table: "#reports",              
            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
   $('#reports').on( 'click', 'tbody td.editable', function (e) {
            editor.inline( this );
        } );
    
   $('#reports').DataTable( {
        dom: 'Bfrtlip', //Look here for what this means: http://datatables.net/reference/option/dom
        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 }

            ]
   } );

} );


</script>
</p>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The first thing to say is that there is no sAjaxSource option in Editor - the option you want is ajax. A full list of the options available in Editor is given here.

Could you copy and paste the error from your browser's console? I don't see any syntax error on the editor = new $.fn.dataTable.Editor({ line.

Allan

alpachadha

<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.jqueryui.min.js"></script>
<!--<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.foundation.min.js"></script>-->
<!--<script type="text/javascript" src="/$cinfo.getSiteName()/scripts/js/editor.bootstrap.min.js"></script>-->
<script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>



<script language="javascript" type="text/javascript">

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {  
    // Set up the editor
     editor = new $.fn.dataTable.Editor({
            "ajax": "/merlin/$cinfo.getSiteName()/FreseniusReportManager",
            table: "#reports",              
            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
   $('#reports').on( 'click', 'tbody td.editable', function (e) {
            editor.inline( this );
        } );
    
   $('#reports').DataTable( {
        dom: 'Bfrtlip', //Look here for what this means: http://datatables.net/reference/option/dom
        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 }

            ]
   } );

} );


</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
   $('#report').DataTable( {
        dom: 'Bfrtlip', //Look here for what this means: http://datatables.net/reference/option/dom
            buttons: [
                      {
                          extend: 'excel',
                          text: 'Export to Excel',
                        
                      }
            ]
   } );

} );


</script>

this is the code , i am using and error is

on the line : editor = new .fn;

Uncaught SyntaxError: Unexpected identifier

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

alpachadha

Still not working

allan

Could you try using the following please?:

editor = new jQuery.fn.dataTable.Editor({

I'm wondering if your JSP is trying to parse the $ as it was...

Allan

alpachadha

Thank you very much, it is working fine now