Uncaught Error adding field - unknown field type select2 Error.

latheefp

I am getting error "Uncaught Error adding field - unknown field type select2" while loading page, i have already included select2 css and js. what could be issue here.

Ref:

https://datatables.net/forums/discussion/45901/multi-select-field-type-or-other-options-in-editor
https://editor.datatables.net/plug-ins/field-type/editor.select2
https://editor.datatables.net/examples/styling/bootstrap4.html

var editor;

      $(function () {
        editor = new $.fn.dataTable.Editor( {
            //ajax: "/users/edit",
            ajax: {
                        "url": "/users/usermgt",
                        beforeSend: function (xhr) { // Add this line
                       xhr.setRequestHeader('X-CSRF-Token', csrfToken );
                   },
                    }, 


            table: "#tblusers",
            fields: [ {
                    label: "Username:",
                    name: "username"
                }, {
                    label: "Email:",
                    name: "email"
                }, {
                    label: "Phone:",
                    name: "phone"
                },
               {
                    label: "Active:",
                    name: "active",
                    type: "select",
                    options: [
                        { label: "Active", value: "1" },
                        { label: "Inactive",value: "0" },

                    ]
                },
                 {
                "label": "Make of automobile:",
                "name": "automake",
                "type": "select2",
                "opts": {
                    "allowClear": true,
                    "multiple": true,
                    "placeholder": {
                            "id": "",
                            "text":"(Does not own automobile)"
                        }
                    }
                }

            ]
        } );    



       var table= $('#tblusers').DataTable({
          "ajax": {
                        "url": "/users/getdata",
                    }, 
            lengthChange: false,        
            "stateSave": true,
            "aLengthMenu": [[5, 10, 15, 25, 50, 100 ], [5, 10, 15, 25, 50, 100]],
            "processing": true,
            "serverSide": true,
            "pageLength": <?php  print $PageLength; ?>,
            scrollY:        "300px",
            scrollCollapse: true,
            select: true,
            "columns": [
               <?php
                foreach($feildsType as $key =>$val){
                    if($val['viewable']==true){
                        if($val['searchable']==1){$searchable="true";}else{$searchable="false";}
                        print '{"data":"' . $val['fld_name'].  '", "name":"'. $val['fld_name'].'", "width":"'.$val['width'].'%",'.'"searchable":'.$searchable.'},'."\n";
                    }
                }
               ?>

            ],

            }); //End of dT.




       // Display the buttons
        new $.fn.dataTable.Buttons( table, [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor },
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [ ':visible' ]
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: [ ':visible' ]
                    }
                },
                {
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: [ ':visible' ]
                    }
                },

                'colvis',
        ] );

       table.buttons().container()
            .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

latheefp

ooh my bad.
it worked by adding editor.select2.js js after DT js. order matters.

https://editor.datatables.net/plug-ins/download?q=field-type/editor.select2.js