columnControl.target
Set which row in the header / footer the content should apply to.
Please note - this property requires the ColumnControl extension for DataTables.
Description
When working with ColumnControl, you might find it useful to add content to multiple rows in a table header, or into the footer, rather than trying to cram everything into a single row in the header. Each row can have its own content added to it though the ability to specify multiple ColumnControl configurations (an array) in columnControl. With that you need the ability to tell it which row you want your content to apply to. This option (columnControl.target) provides that ability.
ColumnControl can target content into any row of the header or the footer of a DataTable using this option.
It is important to note that if you specify a row which doesn't exist in the table's HTML, ColumnControl will create the row for you automatically, with the correct number of cells for the number of columns in the table (one per column).
Types
number
As a number, this option will define which row in the table header the ColumnControl should apply to.
string
A string provides the options of targeting either the table header or footer. It can take the following formats:
thead:\d- add the content to the table header, the row index defined by a digit (\d) - e.g.thead:0for the first row in the header,thead:2for the third, etc.tfoot:\d- as above, but inserting content into the table footer.tfoot- add the content to the first row in the table footer (i.e. a shorthand fortfoot:0).
Any other format is considered to be invalid.
Default
- Value:
0
The content will be inserted into the first row in the table header.
Examples
Create a DataTable with a ColumnControl ordering icon (disabling the DataTables default).:
new DataTable('#myTable', {
columnControl: ['order'],
ordering: {
indicators: false,
handler: false
}
});Add a search input into the table footer:
new DataTable('#example', {
columnControl: {
target: 'tfoot',
content: ['search']
}
});Insert content into both the first and second rows in the table header:
new DataTable('#example', {
columnControl: [
{
target: 0,
content: ['order']
},
{
target: 1,
content: ['search']
}
],
ordering: {
indicators: false,
handler: false
}
});Show an order indicator in the table header, and search input in the footer:
new DataTable('#example', {
columnControl: [
{
target: 0,
content: ['order']
},
{
target: 'tfoot',
content: ['search']
}
],
ordering: {
indicators: false,
handler: false
}
});Related
The following options are directly related and may also be useful in your application development.