SearchPane - feedback

allan · November 2017

This thread is for feedback of the SearchPane blog post.

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

Full support for Bootstrap, Foundation, Semantic UI, etc.
Server-side processing support (loading data from the server-side)
Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
Ordering of data to match the DataTable
Search the search pane!
Rebuild API method for selected columns
Collapsible container
Support for array based data
Interfacing with the global search (difficult?)
Selection options similar to Select (e.g. os and multi, etc.)
Option to match column visibility (with or without Responsive?)

Loren Maxwell · December 2017

Allan, just saw the search pane and . . . IT IS AWESOME . . .

No ideas offhand for additional features, but consider this a definite +1 for offering it as a full extension.

Loren Maxwell · December 2017

Allan, trying this out on a test page but I get an error when the page first comes up (only when I'm using the search pane):
http://ghsfha.org/w/Special:SeasonHome?view=development&season=1985&org=GHSA&class=AAAA

Also, do you have an example showing how to specify which columns you'd like to have a search pane for, regardless of the threshold?

Finally, an idea for a feature (although it's not really a feature per se) is to have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.

For example, in my table there are 92 teams in Class AAAA and 43 in Region 8, but only 11 at the intersection of Class AAAA and Region 8.

So when I select AAAA then I might expect to see something like

11 / 43

next to 8 in the Region search pane to indicate there are 11 records with the current filter(s) and 43 in the table in whole.

Anyway, like I mentioned above, an AWESOME plugin!

Loren Maxwell · December 2017

Another quick thought --

I noticed that when a selection is made on one of the search panes, the selection is highlighted and the table is filtered on that selection.

However, when no selection is made, then there is no filter applied for that table.

My suggestion would be that when the search pane initially comes up then all the items are selected (dark blue-ish color) since they all are showing and when one item is selected then the others are actually deselected.

I think it would make it clearer when the table is being filtered on a specific search pane or not.

For example, using my table, select Region 8 and then scroll back up to the top of the Region search pane.

I know it's filtered because of the "X" on the search pane, but at a quick glance the search pane has the same look as the Class search pane where no filter is applied.

Now if I select Class AAAA, then at a glance I can easily see a Class has been selected but it's not obvious that only Region 8 is selected as well.

Loren Maxwell · December 2017

Also, I use an enum for the Playoffs field. It would be nice if the search pane offered the enum values in the proper order.

If not too difficult, perhaps the search pane could even offer sorting on the filters that automatically matches the column sorting (i.e., ['desc'] or whatever).

garymh · December 2017

I love it! It's perfect for what I need.

My only request would be a way to set a default filter. For example, I have a column called "membership type" that has the options "Full" and "Associate", but I would like only "Full" selected by default.

mattlees · December 2017

Had to sign up to the forums to say this is brilliant!

Only stumbled across datatables a few months ago and been implementing it across multiple data sources. Been doing some filter with buttons but this is great.

My only feedback is along the lines of Loren Maxwell in updating the count once you start to filter. eg 12 / 44 records, or the ability to eliminate lines that are no longer an option.

rxforces · December 2017

How does rebuild API work?

When I made selection on one column, I want to rebuild other columns with filtered data. Is it possible?

rduncecb · December 2017

Very nice indeed, could definitely make immediate use of this and I expect a lot of others could too.
In regards to additional features, it might be nice if individual column 'panes' can be rebuilt rather than all column filters in the search pane? Perhaps extending the existing API column-selectors to read like:

table.columns(<column selector>).searchPane().rebuild()

Regardless, love it!

gs2589 · December 2017

This is something I've been looking for soooo much!!! Amazing!! Thanks!!

Some initial thoughts:

-It would be nice if each filter had a search box, so that when there are many options, a user can quickly filter the filter list to select the desired items to filter (see Google sheets filters for example)

-It would be nice if there was a way to make the filters collapsible. (again see Google sheets)

-Lastly, check out these filters here:
https://airtable.com/universe/expFo1yNQPYwhey5n/vc-fund-database-for-early-stage-startups?explore=true
Filters like these would be 'killer'

I played around with your examples, but have not yet implemented it myself. Once I do, I will come back with more feedback.

adarshmadrecha · December 2017

This extension is just awesome.

allan · December 2017

Hi all,

Thanks for the feedback! Sorry for the delay reply - the forum wasn't highlight new replies in this thread for me (I thought no one had replied!).

Delighted to hear that this looks like it should be useful. Some fantastic ideas brought up here, which I've added to the list in the first post above.

In answer to questions:

@Loren Maxwell Also, do you have an example showing how to specify which columns you'd like to have a search pane for, regardless of the threshold?

Use the columns option (where ... is column-selector):

searchPane: {
  columns: ...
}

My suggestion would be that when the search pane initially comes up then all the items are selected

That's an interesting point. I'd been looking at it like a filter, nothing selected, nothing to filter, just like the search box. It also makes the performance faster, but I do see the point there. Let's see what others think.

@garymh My only request would be a way to set a default filter.

You can do that using the searchCols option - set it to be the value of the items to want to be highlighted.

@rxforces When I made selection on one column, I want to rebuild other columns with filtered data. Is it possible?

Not yet - but it goes hand-in-hand with the suggestions above about having two counts when filtering.

@gs2589 https://airtable.com/universe/expFo1yNQPYwhey5n/vc-fund-database-for-early-stage-startups?explore=true

That is cool. Thanks for the link. I've actually got something not too dissimilar prototyped . It needs some polish before it can be published though!

Regards,
Allan

dclar43 · December 2017

Have you considered supporting search filters of this type in footer elements?

In my main use case for DataTables screen real estate is scarce. Quite a while back I wrote a small plug-in that I named Foot Filter, not sure how I feel about that since it invokes the thought of dirty feet.

Here is a quick example of what it does. Excuse the janky date selector I've been meaning to update it :X. Also in normal usage the select lists don't jump around as much, this demo table just isn't fully setup:
gif
webm link for better quality

It supports what I've needed it to: Select lists, text, numeric, and date ranges.

I would have released it to the public but it's terribly written and would probably break in every other scenario than my own. Back then I'd not really worked with front end development, jQuery, or DataTables much.

allan · December 2017

I feel that would be a separate plug-in. There is certainly overlap, and it might be that the two should be merged together - there is a lot of scope for improving filtering in DataTables!

Allan

Loren Maxwell · December 2017

@allan -- Just wanted to follow up on way to select/deselect search pane options.

The behavior I suggest:
1) Everything highlighted initially
2) Clicking an option in one search pane effectively deselects the other options in that pane
3) Clicking another option in that pane deselects the first option and selects the new one
4) Multiple options in the same pane can be selected using ctrl-click or shift-click

is the behavior of the slicer used on pivot tables in Excel, which serves the same purpose as the search pane.

Some might be familiar with that functionality already.

Loren Maxwell · December 2017

Allan, not sure if you want just feature requests here for the search pane or some troubleshooting type of stuff, but I have an odd behavior with it on one of my pages:
http://ghsfha.org/w/Special:SeasonHome

To duplicate:
1) Select "GHSA" for the Organization
2) Select "A" for the Class
3) Select "AA" for the Class

I've played around with it and noticed that it seems to include from the lowest selected Class (fewest "A"s) and above when more than one Class is selected.

I think it may have something to do with the repeating "A"s used for the classification of the teams since I don't get this behavior with any other search pane.

It also does it on the Class search pane for seasons when we used Class B and Class C designations:
http://ghsfha.org/w/Special:SeasonHome?view=info&season=1963

To Duplicate:
1) Select "GHSA" for the "Organization"
2) Select "B" for the Class
3) Select "A" for the Class

Now Class B and Class A teams show up, but so do Class AA and Class AAA teams although Class C teams don't.

hodoninska · December 2017

This looks like it would be really useful Allan. If the columns.data or columns.render options are being used with a function that returns values in response to a 'filter' request, will these values will be used for this search function?

How would you cope with the same filter response being returned for rows with a different 'display' value?

A project that I am working on at present is going to require some advanced search facilities using data that is not displayed in the table. In effect the search will need to be across many child rows when only the parent rows are being displayed. How about providing the ability to fetch the data for a specific search column via an ajax request? The search column might not even be a visible column in the table and for a single row would contain multiple values.

miltonbarboza · December 2017

That is an amazing plugin. I am just missing some things though:
- Because of the size of the panel, I think that a button to show/hide the panel would be useful. It is easy to be implemented since you can control the container, but it is not an option right now. Also this panel could looks like the Multi-column layout with a button for each column initialized.
- Also, I miss a function to control the plugin dynamically like: table.searchPane.column(2).hide('Tokyo'); or something during the init like

searchPane: {
            container: '.searchPanes',
            columns: {
                index: 2,
                hide: 'Tokyo'
            }
        }

My suggestion would be that when the search pane initially comes up then all the items are selected

That's an interesting point. I'd been looking at it like a filter, nothing selected, nothing to filter, just like the search box. It also makes the performance faster, but I do see the point there. Let's see what others think.

I agree with that and it would match the above idea of having a control during the initialization.

miltonbarboza · December 2017

Sorry for the new reply but I can't edit my previous post.

I could implement what I wanted simulating a click after the datatable initialization.
Since I wan't to disable only one item, I use:
$("li:not(:contains('Tokyo'))").click();
That way, all the items that are not Tokyo are clicked.

rduncecb · December 2017

My suggestion would be that when the search pane initially comes up then all the items are selected

That's an interesting point. I'd been looking at it like a filter, nothing selected, nothing to filter, just like the search box. It also makes the performance faster, but I do see the point there. Let's see what others think.

My vote would be for it acting as a filter, nothing selected, nothing to filter by, perhaps it could be a configuration option to allow both? Obviously I can't speak for the use cases of others by I would be providing a filter so users could, in a few clicks, filter the data to specific values they were interested in, if they were all selected they would first have to deselect all options then re-select or deselect a large number of values being careful not to deselect what they were interested in. From a UX perspective in my use cases fewer clicks for obtaining very specific data would be preferred. From a dev perspective, most efficient wins

Loren Maxwell · December 2017

@rduncecb

I mentioned this above, but not in the same post so you might not have seen it.

I certainly agree with fewer clicks and I think my approach would still achieve this.

Here's the behavior I suggest, which is the same as Excel's Slicer tool (what you're looking for would be achieved by #2):
1) Everything highlighted initially
2) Clicking an option in one search pane actually deselects all the other options in that pane (so one-click to filter down to the option, which you suggest)
3) Clicking another option in that pane deselects the first option and selects the new one (another one-click filter instead of one to select the new filter and another to deselect the old)
4) Multiple options in the same pane can be selected using ctrl-click or shift-click (only multiple clicks if multiple options are selected)

Also, I didn't include it above but the Slicer also has a "Clear" button that actually just re-selects all the options in that pane.

jstemper · December 2017

Fantastic looking and useful plugin. I'm actually having fun playing with it. The one thing I am having issues with is I have a 20 column table that I would like to only show the search pane for one column.
When I use this code:

  searchPane:
       {
        container: '.searchPanes'        
       },

I get a handful of columns that seem to match the threshold default, but when I use the following configuration:

searchPane:
      {
        container: '.searchPanes',
        threshold:0,
        columns: [
              { name: 'sponsor' }
            ] 
    }

I get a large block of empty space in my container, but the search panel with the column name sponsor does not show up. I am using server side processing.

The columns definition from my Datatable init is:

 , { data: 'sponsors', name: "Sponsor", defaultContent: "&nbsp;", sortable: true, searchable: false, visible: true }

Loren Maxwell · December 2017

@jstemper I think if you specify a container (container: '.searchPanes',) then somewhere on the page you'll have to provide a div with the searchPanes class for the plugin to insert the search pane into.

Additionally I think the syntax is "sponsor:name" (or at least that's what I'm using and it works for me). See this post: https://datatables.net/forums/discussion/46194

Finally, I think in that same post Allan mentions server side processing is not yet supported, but he may correct me on that.

tacman1123 · December 2017

+1

Yes, this would be a terrific extension.

pcs70 · December 2017

I really do like this new search pane, but in my humble opinion it should dynamically filter out the available options in the selection lists views too while selecting or put the counter values to zero for not applicable options and disable possible selection. Add this part and it's complete and a great extension.

allan · December 2017

Thanks for your feedback everyone. This will almost certainly be promoted to be a full extension in 2018.

@hodoninska If the columns.data or columns.render options are being used with a function that returns values in response to a 'filter' request, will these values will be used for this search function?

That is an excellent point. Currently it it uses column().data() which returns the underlying data. A number of other extensions use an orhtogonal option to allow them to specify what orthogonal data should be used. I think in this case it would actually make sense to have options for both the label and the value (display and filter in the orthogonal options terminology). Added to the list!

@miltonbarboza Also, I miss a function to control the plugin dynamically like: table.searchPane.column(2).hide('Tokyo'); or something during the init like

Excellent idea. Also added.

@jstemper The one thing I am having issues with is I have a 20 column table that I would like to only show the search pane for one column.

@Loren Maxwell is spot on - columns: [ 'sponsor:name' ] is what you would want to use if you want to select a column based on the columns.name option.

pcs70 it should dynamically filter out the available options in the selection lists views too while selecting or put the counter values to zero for not applicable options and disable possible selection

Numbers for certain. Filtering out the other options - possibly. I'll see about making that an option.

Regards,
Allan

Loren Maxwell · December 2017

A quick note about using column.render() -- the count shows up as the actual data but the filter appears to apply to what is rendered in the field.

For example, I'd like to filter on a field named 'rank', but I use render to add a '#' before the rank.

The search pane might show a rank of '1' with a count of 9, but when I select it the table shows no records because it filters on the '1' but the render function for that field shows a '#1'.

Loren Maxwell · December 2017

@allan, this might be outside the scope of what you had intended, but an idea is to define several criteria that the search pane could look for at one time.

For example, I use Datatables for an American football site, so one of the search panes could have "Perfect teams" listed in it and the filter applied would be teams 1) without any losses and 2) without any ties.

LaterGator · December 2017

Hi Allan, I really like the new search pane!

However, unless I'm missing something very basic, it's not working for DataTables Server Side Processing (SSP). Specifically, in a test using one column (Customer Type), the search pane is only reflecting the count of the first page of the table.

Question: Is SearchPane SSP enabled? (If so, any suggestions on what I may be doing wrong?)

Thanks!

allan · December 2017

@Loren Maxwell - Spot on. This is the point about orthogonal data. SearchPane needs an option to get the orthogonal data for a column, not just the raw data.

Interesting idea making it a multi-column search. That's not something I'd been planning to do - rather just to keep it as an individual column filter and more complex searches such as that can be done with the API, but its more certainly food for thought!

@LaterGator - No, If you have a look at the comments above you'll be able to see that it is not currently suited for server-side processing, since it gets the list of options from the data on the client-side. I'll need to add an option to allow it to populate the options from another source, and you'd need to modify your SSP script to list all of the options available for those columns on the first draw.

Allan

Loren Maxwell · December 2017

Thanks @allan, I overlooked the discussion on the orthogonal data above!

SearchPane - feedback

SearchPane - feedback

Feature list

Replies

Howdy, Stranger!

Categories

DataTables

SearchPane - feedback

SearchPane - feedback

Feature list

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables