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

sumanthbhe

var workorder_path = "/dashboard/workorder_list/0/?format=json";

var editor = new $.fn.dataTable.Editor( {
    ajax: {
        url: workorder_path,
        dataSrc: ''
    },
    table: "#workorder_table",
    fields: [
        { label: "ID:", name: "id" },
        { label: "Task:",  name: "task.name" },
        { label: "Description:",   name: "description" }
    ]
} );



var workorder_table = $('#workorder_table').dataTable({
    dom: 'Blfrtip',
    JQueryUI: true,
    bPaginate: false,
    sScrollX: "100%",
    responsive: true,
    select: true,
    buttons: [
        {
            text: 'New',
            action: function () {
                create_workorder_window();
            },
            className: 'btn btn-warning btn-outline'
        },
         { extend: "edit",   editor: editor },
        { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
    ],
    ajax: {
        url: workorder_path,
        dataSrc: ''
    },
    columns: [
        {"data": "id", "class": "workorder_id"},
        {"data": "thumb", "render": function(data, type, row) {
                                        return `<a href=` + data + ` data-fancybox> <img src=` + data + ` width="80" height="45"> </a>`;
                                    }},
        {"data": "task.name"},
        {"data": "description"},
        {"data": "status", "class":"v-a-m", "render": function (status, type, row) {
                                                return `<div class="media media-auto">
                                                            <div class="media-left">
                                                                <div class="avatar">
                                                                    <img class="media-object img-circle"
                                                                         src=${ status.image }
                                                                         alt=${ status.name }
                                                                         title=${ status.name }>
                                                                </div>
                                                            </div>
                                                           <div class="media-body">
                                                                <span class="media-heading">${ status.name }</span>
                                                            </div>
                                                        </div>`;

        } },
        {"data": "start_date", "visible": false},
        {"data": "end_date", "visible": false},
        {"data": "assign_to", "width": "400px", "defaultContent": "None", "render": function (assign_to, type, row) {

                                                return `<div class="media media-auto">
                                                        <div class="media-left">
                                                            <div class="avatar">
                                                                <img class="media-object img-circle"
                                                                     src=${ assign_to.photo }
                                                                     alt=${ assign_to.official_name }>
                                                            </div>
                                                        </div>
                                                        <div class="media-body">
                                                            <span class="media-heading text-white">${ assign_to.official_name }</span>
                                                            <br>
                                                            <span class="text-gray-lighter"><span>${ assign_to.designation.designation }</span></span>
                                                        </div>
                                                    </div>`

        } },
        {"data": "creation_time", "visible": false},
        {"data": "modified_time", "visible": false}
    ]
});

I am getting the Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
Allan please help me.

allan

Hi,

That error suggests that the Editor Javascript file hasn't been included on your page. You can download the Editor trial from its download page.

Allan

sumanthbhe

Thank for the reply. But i added both files.

<link rel="stylesheet" type="text/css" href="jquery/css/editor.dataTables.css">
<script type="text/javascript" src="jquery/js/dataTables.editor.js"></script>

allan

The error still suggests that Editor isn't being included in some way.

Can you give me a link to the page showing the issue so I can help to debug it please?

Thanks,
Allan

sumanthbhe

I forget to add dataTables.select.js file.
Thank you for the support.