SearchPane - feedback

lenamtl

Hi,

I think using Select2 multi-select will be more easier to use
(we can make multi selection and also do a search with Select2)

I think the new box proposed are not going to work well in responsive, specially for long list to scroll...

I really like the clean example provided by @gs2589
The filter is very user friendly and clearly state how many filters applied, this is wow...
https://airtable.com/universe/expFo1yNQPYwhey5n/vc-fund-database-for-early-stage-startups?explore=true

allan

I feel that that sort of search builder would be an entirely different extension and authors could then select if they want to use that or a pane like presented here.

I have actually been working on something not too dissimilar and hope to introduce that in the not too distance future as well.

Allan

tobias_richter

Very nice extension - Thank you!

Additionaly it would be nice to select multiple entries in the SearchPane by pressing CTRL+Shift key...

allan

@tobias_richter - Do you mean a shift click to select a range? That's a nice idea - thanks.

Allan

eladnova

I like it. I'd probably prefer - for appearance sake - is these were three drop down select boxes instead of the large multi-line fields they are in your demo.

Maybe there's a way to do that?

allan

@eladnova - One method for doing that is shown in this example.

Allan

Arthur_Kozinski

Hey Allan,

extension already running in production. Working smoothly, so thanks alot for the effort!

Just a quick question: is there any easy way to define certain filters to be activated by default?

F.i. when loading the page, hide all records not belonging to certain categories?

allan

You can set a default using searchCol, but that won't hide categories I'm afraid.

Allan

PaulFreeWebs

How can I select only certain ones?

Arthur_Kozinski

Not entirely what I was looking for, but actually enough to solve my use case for the moment :-) Thnx again, Allan!

Loren Maxwell

@PaulFreeWebs,

If you wanted to apply it to a column named "sponsor", then under the searchpane options enter:

searchPane: { columns: [ 'sponsor:name' ] } .

PaulFreeWebs

@Loren Maxwell I tried that but it displayed none, just a blank space

Loren Maxwell

Under the Columns definition make sure you use the name option:

"name": "sponsor"

PaulFreeWebs

where am i doing Columns definition ?

PaulFreeWebs

Never mind I done it

Loren Maxwell

I haven't double checked the syntax below, but this should be close.

Using an example from this page:https://datatables.net/manual/data/

The columns are defined:

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ]
} );

I'm adding a name option to the "position" and "office" columns:

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name'},
        { data: 'position', name:'position' },
        { data: 'salary' },
        { data: 'office', name:'office'  }
    ]
} );

Now I can add a search pane for those:

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name'},
        { data: 'position', name:'position' },
        { data: 'salary' },
        { data: 'office', name:'office'  }
    ],
    searchPane: {
        columns: [
            'position:name',
            'office:name'
        ]
    } 
} );

east1999

This is really great. I fully encourage you to turn it into a full featured plugin!

I agree with the ctrl-click suggestion, and with others also: to me the number one thing is having the counts of each pane update as you select different options in each column. It already updates your overall number, but as you filter, it's nice to know how much is left of what.

At the moment I cannot fully implement searchpane because I have a lot of work with formatting my json using the render property, and I get back to the [object object] pain when I use this. Is there any way to transfer some of the "render" bits to "datasrc" so I don't have to re-format the json appearance's every time?

I also think this would go very well with a little chart. What's really missing from a 1000+ records data table? A fast analysis/overview of the data. "Search pane" could be a part of a little dashboard. Having said that, I hate clutter, so, the simpler the better of course.

PaulFreeWebs

Ive added some css on mine since my options had huge gaps, I now have 2 rows in the boxes!

Gotcha007

"to me the number one thing is having the counts of each pane update as you select different options in each column. It already updates your overall number, but as you filter, it's nice to know how much is left of what."

+1 for this. That's the only missing thing for me!

Gotcha007

@PaulFreeWebs do you care to share? I would be very interested!

PaulFreeWebs

@Gotcha007 Sure! here it is, add this to your CSS
.scroller ul li { float:left; width: 49%; }

Gotcha007

Thanks a lot @PaulFreeWebs , it works perfectly!

20100

tested and i loved it.
I would go for a function to help group data (in addition of variance).

For exemple i have very long fields and I need to group by a shorter substring.

allan

@20100 - Do you mean something like how RowGroup operates in DataTables?

Allan

20100

I was thinking about a function which returns a value for each cell in a column that Searchpane can use to count /group data
or another type in the render function ( like 'display', 'filter','search') used by SearchPane to group data.
In your example, let say that i would like to group the column 'age' by decade [0-9 ] [10-19] [20-29] etc ... the function could return a string ( '[0-9]' , '[10-19]' ...) that search pane will use to regroup data.

husen1234

@dclar43
Foot Filter plug in really great. It looks like filter we are using in Excel. Did you used that on datatables?

@allan
Hello, Is that any possibility where DataTables provide this type of search panel like foot filter which @dclar43 mensioned. That is really good feature

allan

@20100 - Got it. That is a little more advanced than I was thinking for this plug-in, but its a really neat idea. I'll certainly keep it in mind for future development.

@husen1234 - That's outside the scope for what I had intended for this plug-in. However, you can already do that as shown here. That example uses select elements, but there is no reason why you couldn't alter the code to use Select2 / Selectize to allow multiple selections and typeahead.

Allan

20100

@allan thx you can't wait to see that in the future . It could be very usefull for data analysis on my side.

deep2480

Can you please add following features for SearchPane.
1. When the user filter using search text box, searchPanes should also get filtered based on the results in showing the table.
2. When the user selects an option in one of the search panes, searchPanes should get rebuild and show based on the filtered data. Like a cascading effect.

This is a great extension and I would like to congratulate you !!

allan

I hadn't considered interfacing it with the global search before. I suspect that will actually be very hard as DataTables doesn't provide any information on what rows have been filtered out by what filters. I've added it to the list to be considered though.

A cascading option is on the cards - probably the most asked for feature.

Allan