$.fn.dataTable.Editor is not a constructor

ElyaNordin

I want to use drop down list to select the Status option and hold the selected option without submit button. But, I am getting error

jquery-3.2.1.min.js:2 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (http://localhost:37170/Pages/Tasks.aspx:560:26)
at j (http://localhost:37170/Content/lib/jquery/Scripts/jquery-3.2.1.min.js:2:29999)
at k (http://localhost:37170/Content/lib/jquery/Scripts/jquery-3.2.1.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery-3.2.1.min.js:2
jquery-3.2.1.min.js:2 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (Tasks.aspx:560)
at j (jquery-3.2.1.min.js:2)
at k (jquery-3.2.1.min.js:2)

This is my code

         var editor = new $.fn.dataTable.Editor({
            ajax: '/path/retreivedetails/' + status.id,
            table: "#datatable",
            fields: [
                    {
                    "label": "Assign To", "name": "Task_AssignTo"
                },{
                    "label": "Customer", "name": "Task_ContactName"
                },{
                    "label": "Company", "name": "Task_ContactCompany"
                },{
                    "label": "Project", "name": "Task_Project"
                },{
                    "label": "Tasks", "name": "Task_Name"
                },{
                    "label": "Priority", "name": "Task_Priority"
                },{
                    "label": "Due Date", "name": "Task_DueDate"
                },
                  {
                  name: "Status",
                  type: "select",
                  options: [
                        { label: 'Not Started', value: 'Not Started' },
                        { label: 'Deferred', value: 'Deferred' },
                        { label: 'In Progress', value: 'In Progress' },
                        { label: 'Completed', value: 'Completed' },
                        { label: 'Waiting for input', value: 'Waiting for input' },
                  ]
                }
            ]
        });

        var table = $('#dataTable').DataTable({
            "ajax": {
            "url": '/path/retreivedetails/' + status.id,
            "dataSrc": function(json) {
                   return json.data;
            }
        },

            aaSorting: [],
            lengthChange: false,
            columns: [
                { data: "id" },
                { title: "Assign To", data: "Task_AssignTo" },
                { title: "Customer", data: "Task_ContactName" },
                { title: "Company", data: "Task_ContactCompany" },
                { title: "Project", data: "Task_Project" },
                { title: "Tasks", data: "Task_Name" },
                { title: "Priority", data: "Task_Priority" },
                { title: "Due Date", data: "Task_DueDate" },
                { title: "Status", data: "Task_Status" },
                { title: "", width: "40px" },
                { title: "", width: "40px" }
            ],
            columnDefs: [
                {
                    targets: [0],
                    responsivePriority: 1
                },
                {
                    targets: [0, 1],
                    render: function (data, type, full, meta) {
                        if (!data)
                            return "";
                        else
                            return "<div class='text-wrap width-150'>" + data  + "</div>";
                    }
                },
                {
                    targets: [-2],
                    responsivePriority: 2,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<a href="#" class="update" data-toggle="modal" data-target="#editModal" data-id="' + full.Task_ID + '">Edit</a>';
                    }
                },
                {
                    targets: [-1],
                    responsivePriority: 3,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<a href="#" class="delete" data-toggle="modal" data-target="#deleteModal" data-id="' + full.Task_ID + '">Delete</a>';
                    }
                }
            ],
            "rowCallback": function (row, data, index) {

                if (data["Task_StatusID"] == "1") {
                    $('td:eq(7)', row).css('color', '#FF3838');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "2") {
                    $('td:eq(7)', row).css('color', '#8B8B8B');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "3") {
                    $('td:eq(7)', row).css('color', '#5CA6FF');
                    $('td:eq(7)', row).css('font-weight', 'bold');          
                } else if (data["Task_StatusID"] == "4") {
                    $('td:eq(7)', row).css('color', '#358424');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "5") {
                     $('td:eq(7)', row).css('color', '#FFC300');
                     $('td:eq(7)', row).css('font-weight', 'bold');
                }
            },

           ajax: {
                url: "../WS/wsTasks.asmx/GetTasksListSearch",
                type: 'POST',
                data: function (d) {
                    d.userID = getCookie('UserID');
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText + ":  " + error);
                },
            }
        });

        $('#datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, { submitOnBlur: true } );
        });

colin

Hi @ElyaNordin ,

You'll see that error if you haven't include the necessary JS files - you'll need additional files for Editor as it's an extension to DataTables. You'll need to start a trial, or purchase the software, to get access to those files. This example here shows you what you need - look at the Javascript and CSS tabs below the table.

Cheers,

Colin

Kajetan Dziebaj Expondo

Try as I might, I can't get rid of this error even after getting the trial version and using the files.

colin

Has the trial expired? You would get this then.

lovish

Please help me out

vang

You have to register datatables.net site and download the approved the js files and css file.
please use this links js and css files.
Hope it is help you.
https://editor.datatables.net/download/

Bobden

I have the same issue: I did start a trial (today), did "npm install datatables.net-editor-server" but it looks I need to add something like: "../../extensions/Editor/js/dataTables.editor.min.js" in my html page scripts.

But after the npm install above I only can find a editor.js there: node_modules\datatables.net-editor-server\dist\editor.js

I am not a nodejs pro, I guess I could just copy this editor.js file to my dist or public directory, but is this the right thing to do?

colin

@Bobden This section of the manual should help - you run npm install in the directory where the unzipped download is. Hope that helps, let us know if not,

Colin

Bobden

Colin: I did that but it installs your packaged example program.
What I am trying to do is to install editor in my existing program and I followed the other part of the page you mentionned: "Integrating with your own code"

allan

We can't distribute the Editor source code on npm since it is propriety software, npm do not like obfuscated code and it wouldn't work with our 15 day trial period anyway. So what we do is make the datatables.net-editor package available which is a helper package to install the zip that you download from our site. You don't need to do anything other than run an extra command.

I wrote up a blog post about this which is available here.

Regards,
Allan