Automatic type detection
This example demonstrates the use of the search content type being used in a second row of the table header to present an easy to access search input for the end
user to build. It builds upon ColumnControl's ability to insert controls in multiple locations through the
columnControl.target
property, in this case dynamically creating the second row.
The example also demonstrates ColumnControl's integration with DataTables type detection, presenting slightly different search options based on the data type in the column.
In this example, the first three columns are all text-based, and the dropdown search option for each presents options for text-based search. The Extn. and Salary are numeric and have suitable options for such (e.g. less than, greater or equal to, etc), and the Start date column is a date, where a date picker is shown in addition to the condition options.
Ajax loaded data is used in this example to show it operating with automatic data type detection.
| Name | Position | Office | Extn. | Start date | Salary |
|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary |
- Javascript
- HTML
- CSS
- Ajax
- Server-side script
- Comments
The Javascript shown below is used to initialise the table shown in this example:
new DataTable('#example', {
ajax: '../../../../examples/ajax/data/objects.txt',
columnControl: [
{
target: 0,
content: ['orderStatus']
},
{
target: 1,
content: ['search']
}
],
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
ordering: {
indicators: false
}
});
new DataTable('#example', {
ajax: '../../../../examples/ajax/data/objects.txt',
columnControl: [
{
target: 0,
content: ['orderStatus']
},
{
target: 1,
content: ['search']
}
],
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' }
],
ordering: {
indicators: false
}
});
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.