Bootstrap Select / Selectpicker Field Type for Datatables Editor

You are here:
< All Topics

Here is example for the Boostrap select field type, You can aslo say selectpicker. 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 bootstrap select/selectpicker for this plugin/field type. You can download js/css for bootstrap select/selectpicker from following url

https://github.com/snapappointments/bootstrap-select
 (function ($, DataTable) { 
      if (!DataTable.ext.editorFields) {
         DataTable.ext.editorFields = {};
      }
      var _fieldTypes = DataTable.Editor?DataTable.Editor.fieldTypes:DataTable.ext.editorFields;        
     _fieldTypes.bootstrap_select = {
          _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 || {}));
               if (conf.placeholder !== undefined) {                           
                     conf._input.attr('title', conf.placeholder);
               }               
              _fieldTypes.bootstrap_select._addOptions(conf, conf.options || conf.ipOpts);
              // On open, need to have the instance update now that it is in the DOM
             editor.on('open.bootstrap-select' + DataTable.Editor.safeId(conf.id), function () {
                 conf._input.selectpicker($.extend({}, conf.opts,                        { 
                        //Default options
                    width: '100%',
                  }));
             });
             return conf._input[0];
         },
         update: function (conf, options) {                           
               _fieldTypes.bootstrap_select._addOptions(conf, options);
                $(conf._input).selectpicker('refresh');
         },
         get: function (conf) {
                var val = conf._input.val();
                return conf._input.prop('multiple') && val === null?[]:val;              
         },
         set: function (conf, val) {
             conf._input.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');
        },
    };
}) 
Table of Contents
Send a Message