$.fn.dataTable.Editor is not a constructor

$.fn.dataTable.Editor is not a constructor

Abhijith_T Abhijith_T Posts: 6Questions: 1Answers: 0
edited November 2021 in Editor

I was trying to make editor working on my ruby on rails app using the trail package (JS + CSS) provided but Im gettng this error on my console.



  <script type="text/javascript" language="JavaScript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" language="JavaScript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.11.0/b-2.0.0/sl-1.3.3/datatables.min.js"></script>
  <script type="text/javascript" language="JavaScript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" language="JavaScript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
  <script type="text/javascript" language="JavaScript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
  <% render "include/datatablecss" %>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css"/>
  <% render "include/datatablesjava" %>

<p id="notice"><%= notice %></p>


<table id="example" class="display">
      <th>First name</th>
      <th>Last name</th>

    <% @students.each do |student| %>
        <td><%= student.first_name %></td>
        <td><%= student.last_name %></td>
        <td><%= student.age %></td>
        <td><%= link_to 'Show', student %></td>
        <td><%= link_to 'Edit', edit_student_path(student) %></td>
        <td><%= link_to 'Destroy', student, method: :delete, data: { confirm: 'Are you sure?' } %></td>
    <% end %>
<script type="text/javascript" language="javascript" class="init">

    $(document).ready(function (){

    let editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "students/index",
            table: "#example",
            fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Age:",
                name: "age"
        } );

        // Activate an inline edit on click of a table cell
        $('#example').on( 'click', function (e) {
            editor.inline( this );
        } );

        $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "students/index",
            order: [[ 1, 'asc' ]],
            columns: [
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                { data: "first_name" },
                { data: "last_name" },
                { data: "age" }
            select: {
                style:    'os',
                selector: 'td:first-child'
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
        } );
    } );


<%= link_to 'New Student', new_student_path %>


@import "app/assets/stylesheets/css/editor.dataTables.css";


<script src="Editor/js/editor.dataTables.min.js"></script>


<!DOCTYPE html>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <%= stylesheet_link_tag 'baggage', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>


    <%= yield %>


@import "css/editor.dataTables.css";
@import "css/editor.jqueryui.css";
@import "css/editor.foundation.css";
@import "css/editor.bootstrap.css";
@import "css/editor.bootstrap4.css";
@import "css/editor.bootstrap5.css";
@import "css/editor.bulma.css";
@import "css/editor.semanticui.css";


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




let $ = require("jquery")
let dt = require("datatables.net");
let editor  = require( "datatables.net-editor-server" );

$(document).ready(function (){


Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.


  • Abhijith_T Abhijith_T Posts: 6Questions: 1Answers: 0

  • Abhijith_T Abhijith_T Posts: 6Questions: 1Answers: 0

    As the code werent much clear i have added some screenshots. Hope i will get a break through.

  • colincolin Posts: 13,196Questions: 0Answers: 2,256

    It's probably because your Editor trial expired. I renewed at some point, but I can't remember when. Would another extension be helpful?


  • Abhijith_T Abhijith_T Posts: 6Questions: 1Answers: 0

    no. As i mentioned earlier i have downloaded the trail version using another datatable account (JS & CSS) package apparently 3 days ago.

  • colincolin Posts: 13,196Questions: 0Answers: 2,256

    Which account did you use? I can check and confirm that it's valid.


  • Varun DevVarun Dev Posts: 1Questions: 0Answers: 0

    This one. Im logged into this and writing this comment

  • allanallan Posts: 55,056Questions: 1Answers: 8,639 Site admin

    Could you show me the rendered HTML for the page please (i.e. view source and then copy / paste the result here)? Or even better would be a link to the page showing the issue.


Sign In or Register to comment.