Hide / Remove custom searchPane header and searchPane title

timomohr

Dears, how can I hide or remove the following elements:
1. searchPanes.panes.header ("Cases filter" in my example)
2. language.searchPanes.title ("Filters Selected - %d" in my example and default value)

I don't want to keep these elements just empty (not like this, header: ""), I want them to disappear (e.g. header: false) to release the space of the page.

Here's my code:

var table = $('#data').DataTable({
            select: {
                style: 'os'
            },
            dom: 'Plfrtip',
            language: {
                searchPanes: {
                    title: {
                        _: 'Filters Selected - %d'
                    }
                }
            },
            searchPanes: {
                clear: false,
                controls: false,
                panes: [{
                    header: "Cases filter",
                    options: [
                        {
                            label: 'New',
                            value: function (rowData, rowIdx) {
                                return rowData[Index] == 'new';
                            }
                        },
                        {
                            label: 'Transferred',
                            value: function (rowData, rowIdx) {
                                return rowData[Index] == 'same';
                            }
                        },
                        {
                            label: 'Duplicated',
                            value: function (rowData, rowIdx) {
                                return rowData[Index] == 'update' || rowData[Index] == 'old';
                            }
                        }
                    ],
                    dtOpts: {
                        order: [[1, 'desc']]
                    }
                }]
            },
            columnDefs: [{
                searchPanes: {
                    show: false
                },
                targets: ['_all']
            }]
        });

sandy

Hi @timomohr ,

The best way to do this would be to use some css and set the elements display to be none. Take a look at this example.

Thanks,
Sandy

timomohr

@Sandy thanks a lot.

Just found out it should be div.dtsp-searchPane div.dtsp-topRow { display: none;} for custom searchPanes instead of div.dtsp-topRow { display: none;} which is applicable for standard searchPanes