TypeError: $.fn.dataTable.Editor is not a constructor

vineeth_s

I am trying out the sample code from here https://editor.datatables.net/examples/advanced/multiItem.html

When I try to load the page, I get the $.fn.dataTable.Editor is not a constructor error, and only the header is displayed
I went through a couple of the previous posts and cannot seem to figure out the issue

Any help would be much appreciated

This is how my source looks -

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.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="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.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="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"</script>
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "cgi-bin/editor.cgi",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "cgi-bin/table.cgi",
        columns: [
            {
                data: null,
                render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.first_name+' '+data.last_name;
                },
                editField: [ 'first_name', 'last_name' ]
            },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            "selectRows",
            "selectColumns",
            "selectCells",
            "selectNone"
        ]
    } );
} );
</script>

vineeth_s

I also tried downloading the trial version and using that version of dataTables.editor.min.js and still get the same error

allan

Hi,

The code above appears to be missing the closing > for the Editor and Select script elements. It is quite possible that is causing the error.

Also, if you load Editor directly from this site, you should find a message on your browser's console stating that remote hosting of the code isn't possible for Editor. You need to download the trial has your second post indicates you have.

If you are still having problems with it, please link to the page so I can take a look and see what is going on!

Regards,
Allan

vineeth_s

Hi Allan,

How silly of me! Apologies for the trouble and thanks much
It is working now

Regards,
Vineeth

allan

No worries - good to hear that helped!

Allan

e8416o8

I am having the same issue but could not find the errored lines.
Could you point out the line numbers where the missing closing > for the Editor and Select script elements are supposed to be?

Karen
Thanks

allan

Lines 4 and 5 in the above code. At the end of the src attribute.

Allan