searchNumber

Since: ColumnControl 1.0.0

Numeric search for number based columns.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type adds numeric search to a ColumnControl content list through a input element, which accepts number input. The list of logic options for how the search should perform its tests are also suitable for number-based data.

The input element has the following attributes set in order to help present input options for numeric input (particularly on mobile devices):

inputmode="numeric"
pattern="[0-9]*"

It should be noted that search should generally be used rather than this one directly, as search will select the most appropriate search input based on the column type.

Display

It is expected that this content type will have a full cell to draw in if used at the top level, as it benefits from having a large amount of space available (i.e. other buttons won't be used along with it at the top level for a specific set of cells).

In a dropdown, this content type will display as part of the regular content list.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

`clear`

Type: boolean
Default: true

Indicate if a clear icon should be shown at the end of the search input element. When enabled a cross icon will be shown when the input has a value and clicking on the icon will clear the search.

`placeholder`

Type: string
Default: ``

Value to set the placeholder attribute of the input element to. The given string will have the substring [title] will be replaced with the column title.

`title`

Type: string
Default: ``

Text shown above the input, which can be used to tell the end user information about what the search will do. The given string will have the substring [title] will be replaced with the column title.

`titleAttr`

Type: string
Default: ``

Value to set the title attribute of the search input element which can be used to help with accessability. The given string will have the substring [title] will be replaced with the column title.

Example

Manual application of search types (use search to simplify!):

new DataTable('#example', {
    columnControl: [
        {
            target: 0,
            content: ['orderStatus']
        },
        {
            target: 1,
            content: ['searchText']
        }
    ],
    columnDefs: [
        {
            targets: [3, 5],
            columnControl: {
                target: 1,
                content: ['searchNumber']
            }
        },
        {
            targets: [4],
            columnControl: {
                target: 1,
                content: ['searchDateTime']
            }
        }
    ],
    ordering: {
        indicators: false
    }
});