columns.searchPanes.orthogonal
Set values of orthogonal data for rendering functions.
Please note - this property requires the SearchPanes extension for DataTables.
Description
columns.searchPanes.orthogonal
is used to create a custom rendering function. By setting its value to a string it tells SearchPanes how to display and filter on the data it is provided from the DataTable.
SearchPanes uses rendering when populating the table and as standard will render the display value using the columns.searchPanes.orthogonal.display
property and will identify the value to use while filtering by rendering on the columns.searchPanes.orthogonal.filter
value.
columns.searchPanes.orthogonal
is normally only defined as a string when dealing with arrays. By setting the render object to the following
{
render: {
_: '[, ].name',
sp: '[].name'
}
}
and columns.searchPanes.orthogonal
to 'sp'
, the original array will be displayed in the dataTable as a list separated by ', ', where as in the SearchPane each individual element will be displayed. It is then possible to search by individual element rather than the entire array combination.
Types
string
- Description:
By setting the
columns.searchPanes.orthogonal
option to astring
you select which property of the rendering function to use when searching a pane.
object
- Description:
This is the default type of
columns.searchPanes.orthogonal
. If this is in place then the searchPanes will display the same values displayed in the DataTable and will search the DataTable using the same raw Data.
Default
- Value:
object
The default value of the columns.searchPanes.orthogonal
object is shown below
orthogonal: {
display: 'display',
search: 'filter',
sort: 'sort',
type: 'type'
}
This means that as standard the pane will display the same data as the DataTable, and search using the original data from the DataTable.
Examples
Normal Render Function Which Uses Default Value of orthogonal:
{
data: "salary",
render: DataTable.render.number( ',', '.', 0, '$' )
}
Render Function for Arrays:
{
data: 'permission',
render: {
_: '[, ].name',
sp: '[].name'
},
layout: {
top1: {
searchPanes: {
orthogonal: 'sp'
}
}
}
}
Related
The following options are directly related and may also be useful in your application development.