Cannot extend unknown button type: selected

NilsJ

I am trying to implement a basic CRUD for employees but get the above error as soon as I reference the editor.
Javascript code:

var _init = function () {
        _retrieveData();

        _populateSelect();
        
        _initeditor();

        _initEmpTable();
    };


    var _initeditor = function () {

        editor = new $.fn.dataTable.Editor({
            "table": employeeTable,
            "fields": [
                {
                    "label": "Namn:",
                    "name": "name"
                },
                {
                    "label": "Tjänst.Nr:",
                    "name": "officerNr"
                },
                {
                    "label": "AnvändarId:",
                    "name": "userId"
                }
            ]
            ,
            "i18n": {
                create: {
                    button: "Ny",
                    title: "Ny post",
                    submit: "Skapa"
                },
                edit: {
                    button: "Ändra",
                    title: "Ändra post",
                    submit: "Uppdatera"
                },
                remove: {
                    button: "Radera",
                    title: "Radera",
                    submit: "Radera",
                    confirm: {
                        _: "Är du säker på att du vill radera %d rader?",
                        1: "Är du säker på att du vill radera raden?"
                    }
                },
                error: {
                    system: "Ett fel har uppstått kontakta systemadministratören"
                },
                datetime: {
                    previous: 'Föregående',
                    next: 'Nästa',
                    months: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
                    weekdays: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
                }
            }
        });
    };
    

    var _initEmpTable = function () {
        employeeTable = $('#editEmployeeTable').DataTable({
            'language': {
                'sEmptyTable': 'Tabellen innehåller inget data',
                'sInfo': 'Visar _START_ till _END_ av totalt _TOTAL_ rader',
                'sInfoEmpty': 'Visar 0 till 0 av totalt 0 rader',
                'sInfoFiltered': '(filtrerade från totalt _MAX_ rader)',
                'sInfoPostFix': '',
                'sInfoThousands': ' ',
                'sLengthMenu': 'Visa _MENU_ rader',
                'sLoadingRecords': 'Laddar...',
                'sProcessing': 'Bearbetar...',
                'sSearch': 'Sök:',
                'sZeroRecords': 'Hittade inga matchande resultat',
                'oPaginate': {
                    'sFirst': 'Första',
                    'sLast': 'Sista',
                    'sNext': 'Nästa',
                    'sPrevious': 'Föregående'
                },
                'oAria': {
                    'sSortAscending': ': aktivera för att sortera kolumnen i stigande ordning',
                    'sSortDescending': ': aktivera för att sortera kolumnen i fallande ordning'
                }
            },
            'dom': 'Bfrtip',
            'buttons': [
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
                ,
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ],
            'lengthChange': false,
            'select': true,
            'columns': [
                {
                    'data': 'name',
                    'targets': 0
                },
                {
                    'data': 'officerNr',
                    'targets': 1
                },
                {
                    'data': 'userId',
                    'targets': 2
                }
                
            ]
        });
    };

I have included the following files in my gulp file:

paths.js = [
    paths.vendor + "mdbootstrap/js/jquery-3.1.1.js",
    paths.node + "popper.js/dist/umd/popper.js",
    paths.node + "underscore/underscore.js",
    paths.node + "moment/moment.js",
    paths.vendor + "mdbootstrap/js/bootstrap.min.js",
    paths.node + "fullcalendar/dist/fullcalendar.js",
    paths.node + "fullcalendar-scheduler/dist/scheduler.min.js",
    paths.node + "fullcalendar/dist/locale/sv.js",
    paths.node + "select2/dist/js/select2.full.js",
    paths.node + "select2/dist/js/i18n/sv.js",
    paths.node + "jquery-validation/dist/jquery.validate.js",
    paths.node + "jquery-validation/dist/localization/messages_sv.js",
    paths.vendor + "mdbootstrap/js/mdb.js",
    paths.vendor + "mdbootstrap/sv_SE.js",
    paths.node + "datatables.net/js/jquery.dataTables.js",
    paths.node + "datatables.net/js/jquery.dataTables.min.js",
    paths.node + "datatables.net-bs4/js/dataTables.bootstrap4.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.min.js",
    paths.node + "datatables.net-select/js/dataTables.select.min.js",
    paths.node + "datatables.net-buttons-bs4/js/buttons.bootstrap4.js",
    paths.node + "datatables.net-select-bs4/js/select.bootstrap4.min.js",
    paths.node + "jszip/dist/jszip.js",
    paths.node + "pdfmake/build/pdfmake.js",
    paths.node + "pdfmake/build/vfs_fonts.js",
    paths.node + "datatables.net-buttons/js/buttons.html5.js",
    paths.node + "datatables.net-keytable-bs4/js/keyTable.bootstrap4.js",
    paths.vendor + "datatables-editor/datatables.editor.js",
    paths.vendor + "datatables-editor/datatables.editor.min.js"
   ];

paths.css = [
    paths.vendor + "mdbootstrap/css/bootstrap.css",
    paths.node + "font-awesome/css/font-awesome.css",
    paths.node + "fullcalendar/dist/fullcalendar.css",
    paths.node + "fullcalendar-scheduler/dist/scheduler.min.css",
    paths.node + "select2/dist/css/select2.css",
    paths.node + "datatables.net-bs4/css/dataTables.bootstrap4.css",
    paths.node + "datatables.net-buttons/css/buttons.dataTables.min.css",
    paths.node + "datatables.net-buttons-bs4/css/buttons.bootstrap4.css",
    paths.node + "datatables.net-select/css/select.dataTables.min.css",
    paths.node + "editor/css/editor.dataTables.min.css",
    paths.vendor + "mdbootstrap/css/mdb.css",
    paths.webroot +"css/vxa.css"
];

Can you suggest any solution to the problem?

kthorngren

Looks like you are loading both Datatables and Buttons twice:

    paths.node + "datatables.net/js/jquery.dataTables.js",
    paths.node + "datatables.net/js/jquery.dataTables.min.js",
    paths.node + "datatables.net-bs4/js/dataTables.bootstrap4.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.js",
    paths.node + "datatables.net-buttons/js/dataTables.buttons.min.js",

You are loading the normal version and the minified version of both. You only want to load them once.

Kevin

NilsJ

Thanks