searchBuilder.conditions[type][cond].init
Function which returns the JQuery element to be used as the value element.
Please note - this property requires the SearchBuilder extension for DataTables.
Description
This function returns the JQuery element that is to be used as the value element. It takes 3 parameters.
thatthe criteria instance that is being checked.fnthe callback function that must be called on the event which is desired to trigger a search.preDefinedoptional. Any values that should be applied to the elements that are being created.
The internals of the function are down to the functionality that you wish to create, although there are a number of things that must happen.
Firstly, the function must return either a jQuery element or an array of jQuery elements that can take user input if there are values to be collected, otherwise there will not be any elements displayed to collect values from the user. This is valid if the condition is all that is needed, for example the empty condition.
Secondly, the fn parameter is a function that triggers a search of the table. This must be called whenever a search should be triggered. Normally this will be used in an event listener on the jQuery elements. For example, the conditions that use select and input elements call the function on the input event. This function should take 3 parameters.
thatas passed into the init function.thisthe current context of the function.code- optional - needed if using thesearchBuilder.enterSearchorsearch.returninitialisation options. This should be the value of the key that was last pressed. It can be accessed through the eventeby doinge.keyCode || e.which.
Thirdly, the function must provide a way for the preDefined options to be set. This system is used by SearchBuilder internally, not just to set the initial preDefined options (see searchBuilder.preDefined). Because there are a lot of redraws as criteria are added, removed and moved around, so SearchBuilder needs a way to re-assign values to the jQuery elements.
The manual page for custom conditions covers in detail how this and the other values in this object come together to create a custom condition.
Note: Please also not that custom conditions are not supported when the serverSide option is set to true.
Some examples are shown below for select and input elements.
Type
function
- Description:
This function returns the JQuery element that is to be used as the value element.
- Parameters:
Name Type Optional 1 thatNo This
objectis an instance of the Criteria that is being checked2 fnNo This
functionis the function to be called when a search should be triggered3 preDefinedNo This object contains any preDefined options which are set using
searchBuilder.preDefined- Returns:
The Jquery elements that are to be used to represent the value inputs
Examples
Select init function:
...
init: function(that, fn, preDefined = null) {
let column = $(that.dom.data).children('option:selected').val();
let indexArray = that.s.dt.rows().indexes().toArray();
let settings = that.s.dt.settings()[0];
// Declare select element to be used with all of the default classes and listeners.
let el = $('<select/>')
.addClass(Criteria.classes.value)
.addClass(Criteria.classes.dropDown)
.addClass(Criteria.classes.italic)
.append(that.dom.valueTitle)
.on('input', function() {
$(this).removeClass(Criteria.classes.italic);
fn(that, this);
});
let added = [];
let options = [];
// Add all of the options from the table to the select element.
// Only add one option for each possible value
for (let index of indexArray) {
let value = {
filter: settings.oApi._fnGetCellData(settings, index, column, that.c.orthogonal.search),
index,
text: settings.oApi._fnGetCellData(settings, index, column, 'display')
};
// Add text and value, stripping out any html if that is the column type
let opt = $('<option>', {
text : that.s.type.includes('html') ? value.text.replace(/(<([^>]+)>)/ig, '') : value.text,
value : that.s.type.includes('html') ? value.filter.replace(/(<([^>]+)>)/ig, '') : value.filter
})
.addClass(that.classes.option)
.addClass(that.classes.notItalic);
let val = $(opt).val();
// Check that this value has not already been added
if (added.indexOf(val) === -1) {
// $(el).append(opt);
added.push(val);
options.push(opt);
// If this value was previously selected as indicated by preDefined, then select it again
if (preDefined !== null && opt.val() === preDefined[0]) {
opt.attr('selected', true);
that.dom.valueTitle.remove();
$(el).removeClass(Criteria.classes.italic);
}
}
}
// Sort the options so that they appear in order in the select element
options.sort((a, b) => {
if (that.s.type === 'string' || that.s.type === 'num' || that.s.type === 'html' || that.s.type === 'html-num') {
if ($(a).val() < $(b).val()) {
return -1;
}
else if ($(a).val() < $(b).val()) {
return 1;
}
else {
return 0;
}
}
else if (that.s.type === 'num-fmt' || that.s.type === 'html-num-fmt') {
if (+$(a).val().replace(/[^0-9.]/g, '') < +$(b).val().replace(/[^0-9.]/g, '')) {
return -1;
}
else if (+$(a).val().replace(/[^0-9.]/g, '') < +$(b).val().replace(/[^0-9.]/g, '')) {
return 1;
}
else {
return 0;
}
}
});
// Add the options to the select element
for (let opt of options) {
$(el).append(opt);
}
return el;
}
...Input init function:
...
init: function(that, fn, preDefined = null) {
// Create input element
let el = $('<input/>');
// Set the callback function to run on an input
el.on('input', function() {fn(that, el)});
// Assign the preDefined value into the input element
if (preDefined !== null) {
$(el).val(preDefined[0]);
}
return el;
}
...Related
The following options are directly related and may also be useful in your application development.