SearchPane resize specific panes

YoDavish

I used this example to get the searchPanes to be on the left of the DataTables, stacking the panes. However, I've been unable to resize one pane without affecting the other one. Any guidance on this would be great.

colin

Hi @YoDavish ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

YoDavish

Ah sorry, here is a snippet of the code

HTML // used to stack searchpanes into a column
    <style>
        div.dt-searchPanes {
            flex-direction: column;
            height: 600px;
        }
    </style>

<div id="searchPanes">
     [WHERE SEARCH PANES GO IN]
</div>

    <script>
        $(document).ready(function() {
            var table = $('#myTable').DataTable({
                    searchPane: {
                      container: '#searchPanes',
                      columns: [':contains("Division")', ':contains("Subdivision")'],
                      threshold: 0
                    }
            });
    });
    </script>

colin

Hi @YoDavish ,

I meant a live example, with steps to reproduce, as that helps understand the issue. Would you be able to modify this to demonstrate the issue, please.

Cheers,

Colin

YoDavish

Hello @colin,

Gotcha, I've updated the live example. For the search panes "Position" and "Office", is there a way to increase the height of "Position" but not "Office" search pane.

CSS evenly splits the search pane between the # of search panes.

div.dt-searchPanes {
flex-direction: column;
height: 600px;
}

allan

The height is being defined by flex box, so you need to use flex-basis to alter the height of a pane. You can pick it out using a suitable CSS selected - e.g.

div.dt-searchPanes div.pane:first-child {
  flex-basis: 40%;
}

http://live.datatables.net/jijepumo/4/edit

Allan

saphal

how to have only limited search panes in a data table

colin

@saphal - can you expand that statement, please? What do you mean by "only limited search panes"? There are many examples, it would be worth looking at those to see if any of them match your requirement.

Colin

davidjmorin

searchPanes:{
            columns:[2,8,9],  //Change this to whatever columns you want to show in pane
                        cascadePanes: true

        },

sandy

Hi @davidjmorin ,

You want to set columns.searchPanes.show for the columns that you want to display.

Thanks,
Sandy

davidjmorin

@sandy Thank you . Got it working