Since: SearchBuilder 1.0.0

Function which returns the JQuery element to be used as the value element.
Please note - this property requires the SearchBuilder extension for DataTables.


This function returns the JQuery element that is to be used as the value element. It takes 3 parameters.

  • that the criteria instance that is being checked.
  • fn the callback function that must be called on the event which is desired to trigger a search.
  • preDefined optional. 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.

  • that as passed into the init function.
  • this the current context of the function.
  • code - optional - needed if using the searchBuilder.enterSearch or search.return initialisation options. This should be the value of the key that was last pressed. It can be accessed through the event e by doing e.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.




This function returns the JQuery element that is to be used as the value element.


The Jquery elements that are to be used to represent the value inputs


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/>')
			.on('input', function() {
				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),
				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

			let val = $(opt).val();

				// Check that this value has not already been added
			if (added.indexOf(val) === -1) {
				// $(el).append(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);

		// 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) {

		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) {

	return el;


The following options are directly related and may also be useful in your application development.