Uncaught TypeError: DataTable.Editor is not a constructor on local examples

aloudy13 · March 7

Hello,
I've recently downloaded a trial Editor and i'm struggling to get it to work, no table is displayed, only the headers.
I'm getting Uncaught TypeError: DataTable.Editor is not a constructor on every page a try to run.

I've created a new DB in MySQL (I'm using the PHP package), ran the script as described in the manual and with no changes to the Editor code I downloaded i get only this one error. I'm only trying to use examples so far, so my code won't interrupt the Editor package.

kthorngren · March 7

The error means the Editor library isn't loaded properly. I think you will want to load editor.dataTables.js after the other Datatables libraries, like this example. Since Editor is licensed ITs not supported to use CDN to load it on your page. You need to load it from a local resource.

Kevin

aloudy13 · March 7

Hi Kevin.
I am using a local resource, just as it came from https://editor.datatables.net/download/download?type=php

kthorngren · March 7

Please post your script load order.

Also is your Editor initialization in document.ready()? If not make sure it executes after loading editor.dataTables.js.

Kevin

aloudy13 · March 7

Here's the code as I got it from the package:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="https://www.datatables.net/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <title>Editor example - Simple inline editing</title>
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
    <script defer class="init">
    dt_demo.init({
        libs: {"targetFramework":"","js":["jquery","datatables","buttons","select","datetime","editor"],"css":["datatables","buttons","select","datetime","editor"],"components":{"datatables":{"css":"https:\/\/cdn.datatables.net\/2.0.1\/css","js":"https:\/\/cdn.datatables.net\/2.0.1\/js","resolve":true},"autofill":{"css":"https:\/\/cdn.datatables.net\/autofill\/2.7.0\/css","js":"https:\/\/cdn.datatables.net\/autofill\/2.7.0\/js","resolve":true},"buttons":{"css":"https:\/\/cdn.datatables.net\/buttons\/3.0.0\/css","js":"https:\/\/cdn.datatables.net\/buttons\/3.0.0\/js","resolve":true},"colreorder":{"css":"https:\/\/cdn.datatables.net\/colreorder\/2.0.0\/css","js":"https:\/\/cdn.datatables.net\/colreorder\/2.0.0\/js","resolve":true},"editor":{"css":"https:\/\/editor.datatables.net\/extensions\/Editor\/css","js":"https:\/\/editor.datatables.net\/extensions\/Editor\/js","resolve":true},"fixedcolumns":{"css":"https:\/\/cdn.datatables.net\/fixedcolumns\/5.0.0\/css","js":"https:\/\/cdn.datatables.net\/fixedcolumns\/5.0.0\/js","resolve":true},"fixedheader":{"css":"https:\/\/cdn.datatables.net\/fixedheader\/4.0.0\/css","js":"https:\/\/cdn.datatables.net\/fixedheader\/4.0.0\/js","resolve":true},"keytable":{"css":"https:\/\/cdn.datatables.net\/keytable\/2.12.0\/css","js":"https:\/\/cdn.datatables.net\/keytable\/2.12.0\/js","resolve":true},"responsive":{"css":"https:\/\/cdn.datatables.net\/responsive\/3.0.0\/css","js":"https:\/\/cdn.datatables.net\/responsive\/3.0.0\/js","resolve":true},"rowgroup":{"css":"https:\/\/cdn.datatables.net\/rowgroup\/1.5.0\/css","js":"https:\/\/cdn.datatables.net\/rowgroup\/1.5.0\/js","resolve":true},"rowreorder":{"css":"https:\/\/cdn.datatables.net\/rowreorder\/1.5.0\/css","js":"https:\/\/cdn.datatables.net\/rowreorder\/1.5.0\/js","resolve":true},"scroller":{"css":"https:\/\/cdn.datatables.net\/scroller\/2.4.0\/css","js":"https:\/\/cdn.datatables.net\/scroller\/2.4.0\/js","resolve":true},"select":{"css":"https:\/\/cdn.datatables.net\/select\/2.0.0\/css","js":"https:\/\/cdn.datatables.net\/select\/2.0.0\/js","resolve":true},"searchbuilder":{"css":"https:\/\/cdn.datatables.net\/searchbuilder\/1.7.0\/css","js":"https:\/\/cdn.datatables.net\/searchbuilder\/1.7.0\/js","resolve":true},"searchpanes":{"css":"https:\/\/cdn.datatables.net\/searchpanes\/2.3.0\/css","js":"https:\/\/cdn.datatables.net\/searchpanes\/2.3.0\/js","resolve":true},"staterestore":{"css":"https:\/\/cdn.datatables.net\/staterestore\/1.4.0\/css","js":"https:\/\/cdn.datatables.net\/staterestore\/1.4.0\/js","resolve":true},"datetime":{"css":"https:\/\/cdn.datatables.net\/datetime\/1.5.2\/css\/dataTables.dateTime.min.css","js":"https:\/\/cdn.datatables.net\/datetime\/1.5.2\/js\/dataTables.dateTime.min.js"},"bootstrap":{"css":"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css","js":"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js"},"bootstrap4":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/css\/bootstrap.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js|https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js"},"bootstrap5":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/5.3.0\/css\/bootstrap.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/5.3.0\/js\/bootstrap.bundle.min.js"},"bulma":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.9.3\/css\/bulma.min.css"},"foundation":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.4.3\/css\/foundation.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.4.3\/js\/foundation.min.js"},"jqueryui":{"css":"https:\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css","js":"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js"},"material":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/material-components-web\/14.0.0\/material-components-web.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/material-components-web\/14.0.0\/material-components-web.min.js"},"semanticui":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fomantic-ui\/2.9.2\/semantic.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fomantic-ui\/2.9.2\/semantic.min.js"},"uikit":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/uikit\/3.0.2\/css\/uikit.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/uikit\/3.0.2\/js\/uikit.min.js"},"tailwindcss":{"css":"","js":"https:\/\/cdn.tailwindcss.com"},"font-awesome":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css"},"world-flags-sprite":{"css":"https:\/\/cdn.jsdelivr.net\/gh\/lafeber\/world-flags-sprite\/stylesheets\/flags32-both.css"},"demo":{"css":"..\/resources\/demo.css","js":"..\/resources\/demo.js"},"syntax":{"css":"..\/resources\/syntax\/shCore.css","js":"..\/resources\/syntax\/shCore.js"},"buttons-html5":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.0\/js\/buttons.html5.min.js"},"buttons-colvis":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.0\/js\/buttons.colVis.min.js"},"buttons-print":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.0\/js\/buttons.print.min.js"},"jquery":{"js":"https:\/\/code.jquery.com\/jquery-3.7.1.js"},"jszip":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js"},"pdfmake":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/pdfmake.min.js"},"vfsfonts":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/vfs_fonts.js"},"moment":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.29.2\/moment.min.js"},"luxon":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/luxon\/2.3.1\/luxon.min.js"},"sparkline":{"js":"https:\/\/cdn.jsdelivr.net\/gh\/fnando\/sparkline\/dist\/sparkline.js"},"editor-demo":{"js":"..\/resources\/editor-demo.js"}}},
        jquery: function () {
                


var editor = new DataTable.Editor({
    ajax: '../../controllers/staff.php',
    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'
        }
    ],
    table: '#example'
});

$('#example').DataTable({
    ajax: '../../controllers/staff.php',
    columns: [
        {
            data: null,
            orderable: false,
            render: DataTable.render.select()
        },
        { data: 'first_name' },
        { data: 'last_name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        }
    },
    order: [[1, 'asc']],
    select: {
        style: 'os',
        selector: 'td:first-child'
    }
});

// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});



        },
        vanilla: function () {
                


const editor = new DataTable.Editor({
    ajax: '../../controllers/staff.php',
    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'
        }
    ],
    table: '#example'
});

const table = new DataTable('#example', {
    ajax: '../../controllers/staff.php',
    columns: [
        {
            data: null,
            orderable: false,
            render: DataTable.render.select()
        },
        { data: 'first_name' },
        { data: 'last_name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        }
    },
    order: [[1, 'asc']],
    select: {
        style: 'os',
        selector: 'td:first-child'
    }
});

// Activate an inline edit on click of a table cell
table.on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});



        }
    });
    </script>
</head>
<body class="dt-example php">
    <div class="container">
        <section>
            <h1>Editor example <span>Simple inline editing</span></h1>

kthorngren · March 7

It seems the examples for Editor 2.3 are missing loading the Datatables and Editor code. The Editor 2.2.2 download has this for the simple inline editor example:

    <title>Editor example - Simple inline editing</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>

@allan will need to take a look. In the mean time I see two choices:

Use the Editor 2.2.2 download. It uses Datatables 1.13.5 instead of 2.0.1. But you could experiment until Allan fixes the current examples.
In the section below the Javascript and CSS tabs is listed the library files that need to be loaded. You can manually add them to the examples you want to look at. It would look similar to the above except with the code needed for Datatables 2.0 and Editor 2.3. Note you will not be able to use the CDN for the Editor libraries but need to use the local path as shown above.

Kevin

allan · March 7

The way that the scripts are loaded for the examples has changed with DataTables 2 and Editor 2.3, so it isn't just a list of <script> and <link> tags any more.

This is the second report I've had today of such an error in the demo package. I'll try installing the package myself tomorrow morning and see what is going on! Apologies.

Allan

allan · March 8

Yup, there was a packaging error for the URL to load the Editor script - apologies! I've just released Editor 2.3.2 to address this. It is functionality identical to 2.3.1, but the package will load the script for the required location. The download is available here.

Apologies for the error!

Allan

fersuoktem · March 8

Seems like there is a resource path problem:

allan · March 9

I've just tried a fresh download of the 2.3.2 PHP package and installed it and it appears to be working okay. Did you just download the trial zip file, unzip and upload it to your server? Are you able to make it accessible on the web somewhere so I can take a look and see what might be going wrong?

Thanks,
Allan

Uncaught TypeError: DataTable.Editor is not a constructor on local examples

Uncaught TypeError: DataTable.Editor is not a constructor on local examples

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught TypeError: DataTable.Editor is not a constructor on local examples

Uncaught TypeError: DataTable.Editor is not a constructor on local examples

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables