I'm getting this error - $.fn.dataTable.Editor is not a constructor error while using the dataTable inline editing functionality?

Question

I'm trying to add edit row functionality in the dataTable. I have taken the reference from the dataTable official documents - ( https://editor.datatables.net/examples/inline-editing/submitData.html ). But it's showing this error - $.fn.dataTable.Editor is not a constructor.

How to use the edit row method in a dataTable?

HTML:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
    
   <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th width="18%">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>

JS:

var editor;
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "./staff.php",
            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').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, {
                submit: 'allIfChanged'
            } );
        } );
     
        $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "./staff.php",
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: "first_name" },
                { data: "last_name" },
                { data: "position" },
                { data: "office" },
                { data: "start_date" },
                { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
            ],
            order: [ 1, 'asc' ],
            select: {
                style:    'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
    } );

Answer 1

Are you using file from a Free trial version? Ensure that you have purchased the editor or get newer files within the trial period