Click on button to show searchPane in div

Khalid Teli

https://datatables.net/extensions/searchpanes/examples/initialisation/collapseStart.html

Is there any inbuilt option where we click on the button to show serachpane append to a div (on top of table) and toggle between it? rather than showing t on pop up window?

Thnak you

BPAT

I did something where I put the searchpane to the left of the table, maybe it will give you an idea?

"dom": "<'row'<'col-xs-4 small'P><'col-xs-8'pt>>",
"searchPanes": {
collapse: 'Filter Results',
controls: false,
dataLength: false,
cascadePanes: true,
hideCount: true,
layout: 'columns-1',
order: ['Product Name', 'Product Portfolio', 'State', 'Segment', 'Membership','Funding' ]
},
language: {
searchPanes: {
loadMessage: "Loading filters..."
},
},

kthorngren

I use the following code to initialize SearchPanes:

            table.searchPanes.container().prependTo(table.table().container());
            table.searchPanes.container().hide();

Then use the following to show the pane when the button is clicked.

table.searchPanes.container().show();

This example will provide more information about using the searchPanes.container() to initialize searchPanes. instead of the dom option.

Kevin

sandy

Hi @Khalid Teli ,

It might be worth taking a look at this example as well. I think it is doing what you want?

Thanks,
Sandy

Khalid Teli

@sandy
Thank you. It is exactly what I was looking for.

@kthorngren your solution worked too. Thank you

@BPAT thanks for your suggestion

kthorngren

Thats a neat solution!

Kevin

imdkbj

Hey guys need help on below 2 point.

1. After using the searchPanes buttons , pageLength selection is missing
2. Unbale to config the filter model layout if using button way.

sandy

Hi @imdkbj ,

Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. 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.

Thanks,
Sandy

imdkbj

Hey, Pls find the testcase, Comment is given there too for more clarity.

http://live.datatables.net/kuliwupu/1/edit

sandy

Hi @imdkbj ,

After using the searchPanes buttons , pageLength selection is missing

You aren't adding the length selection to the dom property. If you take a look at the documentation there then it should make sense.

Unbale to config the filter model layout if using button way.

You are configuring the searchPanes.layout property correctly if you were initialising SearchPanes within a button, what you are doing here is slightly different as your button controls the div rather than SearchPanes. Therefore you need to initialise it in the normal way.

I've updated your example to show these fixes as you can see here.

Thanks,
Sandy

imdkbj

Hey Thnx and sorry for my mistakes.