$.fn.datatable.editor is not a constructor

lewiscopner

Hi all,

This seems to be a well discussed error, but I've not been able to resolve it.

"$.fn.datatable.editor is not a constructor"

I have these references to js and css.

script src="js/datatable-editor/datatables.js"></script
script src="js/datatable-editor/dataTables.editor.js"></script
script src="js/datatable-editor/editor.bootstrap.js"></script
script src="js/datatable-editor/editor.bootstrap4.js"></script
script src="js/datatable-editor/editor.foundation.js"></script
script src="js/datatable-editor/editor.jqueryui.editor.js"></script
script src="js/datatable-editor/editor.semanticui.js"></script

<link rel="stylesheet" type="text/css" href="css/datatable-editor/datatables.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.foundation.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/datatable-editor/editor.semanticui.css"/>

I am initially just trying to initialise as described in this article - https://editor.datatables.net/manual/getting-started

var editor;
$(document).ready(function () { editor = new $.fn.dataTable.Editor({}); });

Any advice would be greatly appreciated!

Thanks,
Lewis

tangerine

You haven't shown your references to js.

kthorngren

You only listed CSS includes. Are you including dataTables.editor.js?

Plus you are loading CSS files for many different styling libraries (bootstrap, jqueryui, ec). Which are you using? You only want to load for that one library.

You can try the Download Builder to help get the correct JS and CSS include files for Datatables and Editor.

Kevin

lewiscopner

Apologies, the js was excluded from my post. They're there now that I've removed the < and >.

I'll reduce the css references, thanks for the advice.

tangerine

A reference to jQuery js should precede your other js references.

kthorngren

The same goes for the JS references.

The Editor is loaded locally on your server. Make sure the paths are correct and the at files are being loaed.

Kevin

lewiscopner

There are no errors when running the code in the attached screenshot. So is the initialisation described in this article no longer supported?

https://editor.datatables.net/examples/inline-editing/simple

Thanks,
Lewis

kthorngren

Maybe the order you are loading the scripts in your page?

ITs hard to say whats going on in your page without seeing it in action. Can you post a link to your page or a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

lewiscopner

Thanks for the feedback.

I've now gone an alternative route with my code, so I'm past the initial error.

However, I am now receiving this (also well documented error).

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

Based on the points in the article, I've played around with the fields defined for my datatable and editor but with no success. Is anyone able to suggest what the correct field setup would be for the Editor based on what I have in the DataTable fields?

var qualifications = [];

var editor = new $.fn.dataTable.Editor({
    table: "#qualifications",
    data: qualifications,
    fields: [
        /*{
            label: "",
            name: ""
        },*/ {
            label: "QualificationType:",
            name: "QualificationTypeName"
        }, {
            label: "QualificationName:",
            name: "QualificationName"
        }, {
            label: "OtherQualification:",
            name: "OtherQualification"
        }, {
            label: "AchievedGrade:",
            name: "AchievedGradeName"
        }, {
            label: "Predicted Grade:",
            name: "PredictedGradeName"
        }]
    });

var table;

$(document).ready(function () {
    table = $('#qualifications').DataTable({
        "data": qualifications,
        "columns": [{
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        {
            data: "QualificationTypeName",
            name: 'QualificationTypeName'
        },
        {
            data: "QualificationName",
            name: 'QualificationName'
        },
        {
            data: "OtherQualification",
            name: 'OtherQualification'
        },
        {
            data: "AchievedGradeName",
            name: 'AchievedGradeName'
        },
        {
            data: "PredictedGradeName",
            name: 'PredictedGradeName'
        }
        ],
        "info": true,
        "paging": false,
        "ordering": true,
        "searching": false,
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
    });


    $('#qualifications tbody').on('click', 'td:first-child', function () {
        if ($(this).closest('tr').hasClass('selected')) {
            $(this).closest('tr').removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).closest('tr').addClass('selected');
        }
    });

    $('#qualifications').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(table.cell(this).index());
    });
});

lewiscopner

Hi Kevin,

I've uploaded a test case, it's showing the initial error that I was getting though.

http://live.datatables.net/yesurumi/1/edit?html,js,console,output

Any input would be great, thanks.

Lewis

kthorngren

There were a few things to fix in your test case:

1. Added Editor via Add Library menu
2. Removed some extra characters (";) in the table that were at the end of some lines
3. remove the data option from both Editor and Datatables. In Datatables this cleared the table since the variable is blank

Here is the updated example:
http://live.datatables.net/yesurumi/3/edit

I have found for inline editing to work each row needs filed with a unique ID. not sure you have one with the data you have so e I added one. I used idSrc in the Editor config to map to the ID column. Now inline editing works.

Kevin

lewiscopner

Thanks so much for this Kevin, it's a massive help. Thank you for your time.

Lewis