$.fn.dataTable.Editor is not a constructor error

$.fn.dataTable.Editor is not a constructor error

denizdianadenizdiana Posts: 15Questions: 8Answers: 0

Hello everyone,
I am try to make edit/delete button on every row in my datatable. I am trying to make it with editor but when i add this editor part to my code it, i cannot see my table at all, only the titles show up. It gives me this
$.fn.dataTable.Editor is not a constructor
error. Here is my full code I am working with mvc.

@{
ViewBag.Title = "Login";
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/datatables.min.css" />

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">

<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" />

<meta charset=utf-8 />

Person

name surname mail Edit / Delete

@section scripts
{

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="//editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>

<script>
    var editor;
    $(document).ready(function () {

        editor = new $.fn.dataTable.Editor({

            table: "#table",
            fields: [{
                label: "First name:",
                name: "first_name"
            }
            ]
        });







        $('#table').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();

            editor.remove($(this).closest('tr'), {
                title: 'Delete record',
                message: 'Are you sure you wish to remove this record?',
                buttons: 'Delete'
            });
        });


        $('#table').DataTable(
            {

                ajax: {
                    "url": "myurl",
                    "type": "GET",
                    "datatype": "json",
                    "dataSrc": "person"
                },

                aoColumns: [

                    { mData: 'name' },
                    { mData: 'surname' },
                    { mData: 'email' },
                    { defaultContent: '<input type="button" class="Edit" value="Edit"/><input type="button" class="Delete" value="Delete"/>' }


                ],





            });

        $('#table tbody').on('click', '.Edit', function () {
            alert("world");

        });

    });


</script>

}

@Html.ActionLink("Back to List", "Index")

This question has an accepted answers - jump to answer

Answers

This discussion has been closed.