How to fix $.fn.dataTable.Editor is not a constructor?

madusanka

i saw many quetions regarding with this problem. but i couldn't find a solution
here is my code

async getCustomers(){
                let self = this;
                var editor;
                $(document).ready(function() {
                        editor = new $.fn.dataTable.Editor( {
                            ajax: {
                                data: function (data) {
                                    data.token = localStorage.getItem("token")
                                },
                                'url': '/api/v1/customers',
                            },
                            table: "#customer_list",
                            fields: [ {
                                label: "First name:",
                                name: "first_name"
                            },
                            ]
                        } );
                        $('#customer_list').on( 'click', 'tbody td:not(:first-child)', function (e) {
                            editor.inline( this, {
                                buttons: { label: '>', fn: function () { this.submit(); } }
                            } );
                        } );
                this.dataTable = $("#customer_list").DataTable({
                    serverSide: true,
                    dom: "Bfrtip",
                    ajax: {
                        data: function (data) {
                            data.token = localStorage.getItem("token")
                        },
                        'url': '/api/v1/customers',

                        dataFilter: function (data) {
                            var json = jQuery.parseJSON(data);
                            var response = json.data.searchResults;
                            self.customers = response.customers;
                            json.data = response.customers;
                            json.recordsFiltered = response.recordsFiltered;
                            json.recordsTotal = response.recordsTotal;
                            //console.log(1,JSON.stringify(json))
                            return JSON.stringify(json);
                        }
                    },
                    columns: [
                        {data: "id"},
                        {data: "first_name"},
                        {data: "last_name"},
                        {data: "email"},
                    ],
                    select: {
                        style:    'os',
                        selector: 'td:first-child'
                    },
                });
                $('#customer_list').DataTable().destroy();
                } );
            },

madusanka

i'm developing vue+laravel application and in my welcome.blade file i've imported below cdns

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/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>

madusanka

should i purchased license?

colin

Hi @madusanka ,

It's definitely a licensed product - so you either need to initiate a 14 day trial or purchase the license. You're using the Editor file from our site, which won't work - you need to host either the trial version or the purchased version locally, see here.

Cheers,

Colin

madusanka

thank you @colin

aseverinom

so , dear @madusanka what was the problem ? can you fixed? because i download the editor trial , use the library donwloaded but receive the same error "Uncaught TypeError: $.fn.dataTable.Editor is not a constructor" ... can you help me please, thanks a lot in advance,

colin

@aseverinom It would say that if you've got an unlicensed copy of Editor, your trial has expired, or you just haven't included the files.

Have you purchased Editor? Or when did you start your trial?

Colin

aseverinom

hi @colin, thanks for you reply .. but yesterday I downloaded the JS+CSS and move to libs to local address and put into my code ....script type="text/javascript" src="libs/Editor-2/js/dataTables.editor.js" ... but receive the error again...

so, if I have the trial why have the error "Uncaught TypeError: $.fn.dataTable.Editor is not a constructor" so please can you clarify .. I'll purchase the product if result my test..

thanks a lot in advance,

aseverinom

dear @coli, I purchased a license and open a new discussion on https://datatables.net/forums/discussion/68721/ thanks for your help

colin

OK, thanks for the purchase, I've replied in that new thread.

Colin

rafael@heartbit.es

same problem here

allan

If you are having the same issue, could you give me a link to your page showing the issue so I can debug it and help address it please. It basically means that Editor hasn't been loaded or isn't available on the page for some reason.

Allan

Chiragsss

Hi allan,

I am also having the same issue scratching my head from 10 days, I have created new rails project installed datatables using yarn and downloaded editor from trial version which I created just now. And required files below in application.js as

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

global.jQuery = require('jquery');
global.$ = require( 'jquery' );
import $ from "jquery";
import "jszip";
import "pdfmake";
import "datatables.net-dt";
import "datatables.net-editor";
import "datatables.net-editor-dt";
import "datatables.net-autofill-dt";
import "datatables.net-buttons-dt";
import "datatables.net-buttons/js/buttons.colVis.js";
import "datatables.net-buttons/js/buttons.html5.js";
import "datatables.net-buttons/js/buttons.print.js";
import "datatables.net-colreorder-dt";
import "datatables.net-datetime";
import "datatables.net-fixedcolumns-dt";
import "datatables.net-fixedheader-dt";
import "datatables.net-keytable-dt";
import "datatables.net-responsive-dt";
import "datatables.net-rowgroup-dt";
import "datatables.net-rowreorder-dt";
import "datatables.net-scroller-dt";
import "datatables.net-searchbuilder-dt";
import "datatables.net-searchpanes-dt";
import "datatables.net-select-dt";
import "packs/material_category";

Rails.start()
Turbolinks.start()
ActiveStorage.start()

And replaced editor files in nodemodules with the files from trial version. and I am loading jquery from external source

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

to make sure JQuery loads only once.

But still I am seeing this issue below

Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
js material_category.js:3
jQuery 13

Please help me , if this succeedes then only I can purchase the Datatables licenced version

and also I uploaded configuration through debugger which you can see here
https://debug.datatables.net/enihir

Thanks in advance!

allan

Hi,

What are you using as a bundler - Vite, WebPack or something else? Do you know what mode it is running in - ESM or CommonJS? Are you able to PM me a link to your repo so I can look into it and see what is going wrong?

Allan

Chiragsss

I am currently using Webpack only and please find the repo link here its just a sample program I am working on to see datatables working or not https://bitbucket.org/vijayk084/erp/src/master/

Chiragsss

Hi Alan,

Is there any update on this. If you need more info let me know. Actually we are in little bit short on the deadline

allan

Hi,

Could you give me the command sequence to build and run your sample program?

Thanks,
Allan

Guy--L

Use importmap to include js libraries in rails...
https://eagerworks.com/blog/import-maps-in-rails-7

Then use <script type="module"> at the bottom of erbs to initialize DataTable; not in application.js

Chiragsss

Dear Allan,

Please find the REadme file here https://bitbucket.org/vijayk084/erp/src/master/README.md which has all the required info to setup the application

Chiragsss

Dear Guy,

I am new to importmaps, I tried it but couldnt success to start the app. If there is any example you have with datatables in it it would help me to get started testing these

DaveyJake

I'm having the same exact issue. Purchased a license; set up a very bare example on CodePen. Been trying for the last month to integrate Editor into Vue3 with no success. Any guidance would be much appreciated.

I'm using the same source files in my CodePen as found in the example here: https://editor.datatables.net/examples/simple/simple.html

Chiragsss

Hi Alan,

Could you please let me know if there is any update on this.

allan

@Chiragsss Apologies, I totally lost track of this thread!

I've just tried the Bitbucket repo and get the server started, but when I open the page I get an error:

I've tried creating the images directory, but it doesn't seem to make any difference. Any ideas?

Allan

allan

@DaveyJake - The CodePen isn't working because it is using the hot linked file from https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js. That file will refuse to run on anything other than datatables.net domains. It should actually throw an error on the console saying that is the case - I'll look into why that isn't happening. Using your local copy should do the job. If it doesn't can you give me a link to your page?

Allan

yajra

I bumped into the same issue and the code below did the trick for me:

Using Editor 2.1.0

import './bootstrap';

import 'laravel-datatables-vite';
import Editor from "datatables.net-editor-bs5";

Editor(window, $);

Note: the code above uses laravel and vitejs.

allan

vitejs

Vite will include the ESModule if it is present, which it now is. So yes, if you are bundling, rather than loading it in the browser with the UMD, then you might need to make a change.

Allan