$.fn.datatable.editor is not a constructor

$.fn.datatable.editor is not a constructor

lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0
edited August 2018 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    You haven't shown your references to js.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited August 2018

    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

  • lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0

    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.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0

    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());
        });
    });
    
  • lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    Answer ✓

    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

  • lewiscopnerlewiscopner Posts: 6Questions: 1Answers: 0

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

    Lewis

This discussion has been closed.