Editor Bootstrap-select plugin

HPB

Just something I wanted to share.
Since we at work were using bootstrap-select already, I figured we could use it with datatables as well.

Requires:

https://silviomoreto.github.io/bootstrap-select/

Options:

object opts: bootstrap-select initialisation options object. Please refer to the bootstrap-select documentation for the full range of options available.
object attr: Attributes that are applied to the select element before bootstrap-select is initialised

Javascript:

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'datatables', 'datatables-editor'], factory);
    }
    else if (typeof exports === 'object') {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if (!$) { $ = require('jquery'); }
            factory($, dt || $.fn.dataTable || require('datatables'));
        };
    }
    else if (jQuery) {
        // Browser standard
        factory(jQuery, jQuery.fn.dataTable);
    }
}
(function ($, DataTable) {
    'use strict';

    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);
            }
            if (conf.placeholderValue !== undefined) {
                //not implemented
            }
            if (conf.placeholderDisabled !== undefined) {
                //not implemented
            }

            _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');
        },
    };
}));

Examples:

// Create an Editor instance with a bootstrap_select field, data and options
new $.fn.dataTable.Editor( {
 "ajax": "php/todo.php",
 "table": "#example",
 "fields": [ {
         "label": "Item:",
         "name": "item"
     }, {
         "label": "Priority:",
         "name": "priority",
         "type": "bootstrap_select",
         "options": [
             { "label": "1 (highest)", "value": "1" },
             { "label": "2",           "value": "2" },
             { "label": "3",           "value": "3" },
             { "label": "4",           "value": "4" },
             { "label": "5 (lowest)",  "value": "5" }
         ],
         "opts": {
            "liveSearch": true
         }
     }, {
         "label": "Status:",
         "name": "status",
         "type": "radio",
         "default": "Done",
         "options": [
             { "label": "To do", "value": "To do" },
             { "label": "Done", "value": "Done" }
         ]
     }
 ]
} );

// Add a bootstrap_select field to Editor with options set
editor.add( {
   "label": "State:",
   "name": "state",
   "type": "bootstrap_select",
   "opts": {
       "liveSearch": true,
   }
} );

allan

Awesome - thanks for sharing this with the community!

Regards,
Allan

colin

For additional code, also see this thread,

Colin