Select2 Field Type for Datatables Editor

You are here:
< All Topics

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Here is example for the select2 field type. We assume you have already installed datatables and its editor. If not , you can download or get more details about datatables and editor from following url.

https://datatables.net/
https://editor.datatables.net/ 

You will require select2 for this plugin/field type. You can download js/css for select2 from following url

https://github.com/select2/select2

You can get more details about the option,events and method from following url.

https://select2.org/

Select2 Field Type for Datatables Editor

 (function ($, DataTable) { 
      if (!DataTable.ext.editorFields) {
         DataTable.ext.editorFields = {};
      }
      var _fieldTypes = DataTable.Editor?DataTable.Editor.fieldTypes:DataTable.ext.editorFields;        
     _fieldTypes.select2 = {
          _addOptions: function (conf, options) {
              var elOpts = conf._input[0].options;                       
              elOpts.length = 0; 
            if (options) { 
                 DataTable.Editor.pairs(options, conf.optionsPair, function (val, label, i) {        
                   elOpts[i] = new Option(label, val);
                 });
            }
         },
         create: function (conf) {
              var editor = this;
              conf._input =   $('<select/>').attr(  
                    $.extend({id:DataTable.Editor.safeId(conf.id),
                    multiple: conf.multiple === true},
                    conf.attr || {}));
                              
              _fieldTypes.select2._addOptions(conf, conf.options || conf.ipOpts);
              
             editor.on('open.select2' + DataTable.Editor.safeId(conf.id), function () {
                 conf._input.select2($.extend({}, conf.opts,                        { 
                        //Default options
                    width: '100%',
                    // following property require for inline edit change event handling
                    dropdownParent: $(conf._input).parent(),
                    containerCssClass: $(conf._input).attr("class")
                  }));
             });
             return conf._input[0];
         },
         update: function (conf, options) {                           
                conf.options=options;
                _fieldTypes.select2._addOptions(conf, options);
         },
         get: function (conf) {
                var val = conf._input.val();
                return conf._input.prop('multiple') && val === null?[]:val;              
         },
         set: function (conf, val) {
                _fieldTypes.select2._addOptions(conf, conf.options || conf.ipOpts);            
                if(val.length){
                    for(var i=0;i<val.length;i++){
                       if ($(conf._input).find("option[value='" + val[i] + "']").length)         
                       {
                       } else
                       {
                             
                          if(val[i]!=""){
                               // Create the DOM option that is pre-selected by default      
                               
                               var newState = new Option(val[i], val[i], true, true);                     
                               // Append it to the select                     
                        $(conf._input).append(newState).trigger('change');                     
                       }      
                      
                      }
                   
                     }  
                        $(conf._input).val(val).trigger("change");   

                    } else {              

                        conf._input.select2().val(val).trigger('change');         
                 }  
         },
         enable: function (conf) {
             $(conf._input).prop('disabled', false);               
             $(conf._input).selectpicker('refresh');
        },
        disable: function (conf) {
             $(conf._input).prop('disabled', true);                 
             $(conf._input).selectpicker('refresh');
        },
    };
})  

Select2 Field Type for Datatables Editor Example

  editor = new $.fn.dataTable.Editor({
       ajax: {
         url: "URL",
         type: "POST"
       },
       table: "#tableid", 
       fields: 
       [ 
        {
           "label": "Field Label",
           "name": "dbfieldname",
           "type": "select2",
           "multiple": true,
            // You can set options for select2 as below
            opts : {
                   tags:true,
                   createTag: function (params) {
                      return {
                         id: params.term,
                         text: params.term,
                         newOption: true
                      }
                   },
                   closeOnSelect:false   
            }
         }
        ]
     });

Table of Contents
Send a Message