Select2 Field Type for Datatables Editor
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');
},
};
})