Bootstrap Select / Selectpicker Field Type for Datatables Editor
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');
},
};
})
Bootstrap Select / Selectpicker 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": "bootstrap_select",
"multiple": true,
// You can set options for select2 as below
opts : {
maxOptions:3
}
}
]
});