columns.searchPanes

Since: SearchPanes SearchPanes 1.0.0

Container for options for individual columns.
Please note - this property requires the SearchPanes extension for DataTables.

Description

As standard, no custom options will be applied to the pane for the column if columns.searchPanes is undefined. Otherwise the related options will be applied if they are defined within this object.

This is useful as it means that the panes for individual columns can be customised rather than affecting every pane.

Type

string

Description:: This option is capable of holding all of the sub-options for individual panes.

Default

Value: undefined

The default value for the columns.searchPanes object is undefined meaning the pane will use all the default settings.

Examples

Alter searching and info of the third columns pane:

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                dtOpts: {
                    searching: false,
                    info: true
                },
                targets[2]
            }
        }
    });
});

Hide count for the 5th columns pane::

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    viewCount: false
                }
                targets: [4]
            }
        ]
    });
});

Define custom Options for a specific pane:

$(document).ready(function() {
    var dt = $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [ 
            {
                searchPanes: {
                    options: [
                        {
                            label: 'Under 20',
                            value: function(rowData, rowIdx) {
                                return rowData[4] < 20;
                            }
                        },
                        {
                            label: '20 to 30',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 30 && rowData[4] >=20;
                            }
                        },
                         {
                            label: '30 to 40',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 40 && rowData[4] >=30;
                            }
                        },
                         {
                            label: '40 to 50',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 50 && rowData[4] >=40;
                            }
                        },
                         {
                            label: '50 to 60',
                            value: function(rowData, rowIdx) {
                                return rowData[4] <= 60 && rowData[4] >=50;
                            }
                        },
                         {
                            label: 'Over 60',
                            value: function(rowData, rowIdx) {
                                return rowData[4] > 60;
                            }
                        }
                    ]
                },
                targets: [4]
            },
            {
                searchPanes: {
                    options: [
                        {
                            label: 'Not Edinburgh',
                            value: function(rowData, rowIdx) {
                                return rowData[3] !== 'Edinburgh';
                            }
                        },
                        {
                            label: 'Not London',
                            value: function(rowData, rowIdx) {
                                return rowData[3] !== 'London';
                            }
                        }
                    ]
                },
                targets: [3]
            }
        ]
});

Pre-Select Values in a Pane:

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    preSelect: ['Edinburgh','London']
                },
                targets: [3]
            }
        ]
    });
});

Force panes to hide and show:

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    show: true
                },
                targets: [0]
            },
            {
                searchPanes: {
                    show: false
                },
                targets: [2]
            }
        ]
    });
});

Change the threshold of the uniqueness ratio for a specific column:

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    threshold: 0.99
                },
                targets: [0]
            }
        ]
    });
});

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

Options