{hero}

columns.searchPanes.orthogonal

Since: SearchPanes SearchPanes 1.0.0

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 seperated 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 a string 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: $.fn.dataTable.render.number( ',', '.', 0, '$' ) 
}

Render Function for Arrays:

{ 
    data: "permission",
    render: {
        _: '[, ].name',
        sp: '[].name'
    },
    searchPanes: {
        orthogonal: 'sp'
    },
    dom: 'Plfrtip'
}

Related

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