SearchPane - feedback

deep2480

Thanks Allan for your response. Do you have any timeline for below?

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

If cascading option can be implemented, wouldn't that be same for with the search box? Ultimately, we are looking to reflect the filtered data in the search panes too. For example, in your example today, I enter "san" in the search text box and results are filtered. Now in the search pane for the Position, I see Accountant(2), even though there is no accountant in San Fransico. Don't you think so that is confusing? OR Am I missing anything here? I would like to understand the thinking behind this. I would appreciate your response.

allan

Currently no - I'm afraid I don't have a timeline as I'm working on other aspects of DataTables. I think it is fair to say that this should become an official extension now and yes, the cascading option is the most asked for feature (its open source, if anyone else wants to work on it ).

Regarding your point about the search - I misunderstood before and yes, I see your point now and that is something I can look into.

Allan

Clearwater

We are looking forward to working with this. I'm sure we will need support in the near future. Especially with CSS.

Karlo

Great extension! Thank you!

Today I worked on integrating it and there are a few things I'm struggling with. Maybe someone has mentioned it before, but I'm going to just list it:
* The description and example on your blog https://datatables.net/blog/2017-11-30 mentions the API call searchPane.rebuild(). I think correct is searchPanes.rebuild() (plural).
* As someone mentioned before, the render method isn't used. I have problems with this for several columns, e.g. with columns that use booleans (and I render to checkboxes in the table). The filter suggests "true" if true and nothing if false. The workaround currently is to introduce hidden columns that serve for the filtering only, but that's rather tedious work and some overhead.
* I managed to place the pane between the buttons (top) and the table, and I'm using a button to show/hide it. When I hide it, I'd like to reset any selection and thus turn the filtering off. Therefore, a reset() method or a reset argument to the rebuild() call would be helpful. Is there currently a workaround?
* In combination with the Select extension: Is there a way to determine whether selected rows had become filtered out (after setting the check in the select column)?
* I had to introduce this css to make the labels visible when using Bootstrap 3:

div.dt-searchPanes div.pane div.scroller ul li span.label {
    color: black;
}

Thanks
Karlo

Karlo

In answering one of my own questions above:

I'd like to reset any selection and thus turn the filtering off. [...]. Is there currently a workaround?

I found that this is possible by just writing:

$("#my-searchpane-container button.clear").trigger("click");

Karlo

... one more thing. It seems there's a problem in how searchPanes.rebuild() works:

Suppose I have a column with values "A" and "B" in the rows. I use the search pane to set a filter on "A" so only "A"s are being display in the table. Then I remove all "A" rows from the data using the api, then I call draw() and then searchPanes.rebuild().The effect is that the filtering candidate "A" is being removed from the search pane, but the clear-button in the top right of that pane is still visible (though no selection is made any more in that pane) and the displayed data is still filtered by "A" (so no rows are displayed).

Edit: And I just saw that when a I do ajax.reload() and the resulting data set is empty, then searchPanes.rebuild() would not remove the filtering candidates from the panes.

nessinits

Hi Allan,

I think the SearchPane can be of great help for me. That's some positive feedback for you, thanks.

At first sight I would like to add the possibility to select a few values with the shift function, like any Explorer like functionality. When I use the shift function now, it only selects the first (already selected) value and the last. The values in between are not automatically selected.

It would also be nice if you could show/hide the searchpane (it takes a lot of space) with a toggle button positioned for example next/behind the search input field of the datatable itself.

Hope this helps,
Kind regards,
nessinits

Karlo

Hello!
I've created a repro case here to demonstrate two problems: https://jsfiddle.net/44qb22km/

Here are the steps to reproduce...

Problem 1:
* You see it in the search panel titled "Male (Problem 1)": I'd like to display "Yes" and "No" here, but only "true" appears and "false" doesn't. I think this could be resolved if the search panel extension made use of the render callback.

Problem 2:
* Re-Run the demo
* Observe there are three Offices offered in a search pane
* Select "Tokyo" in the search pane so that the grid is filtered down to one row
* Click "Problem 2" (this removes the Tokyo row, adds another row, then refreshes)
* Observe that "Tokyo" vanished both from the table and from the search pane (ok), but the search is still active with no candidate selected and the table shows no rows. I have to click the cancel button in the top/right corner of the search pane to get rid of the filtering.

Problem 3:
* Re-Run the demo
* Click "Problem 3" (this exchanges the dataSet instance) and calls searchPanes.rebuild(). (This is something that I do frequently in my application!)
* Observe that the search panes still show the options from the previous data set. It didn't refresh and I can't get it back to work with the new data set.

AnthonyKolka

This is super cool. I found a bug though. If data in a column is the value 0, it never gets added to the selection list.

i.stefan.kiss

Didn't have time to fully investigate but i think it's awesome so far. please continue development in this direction

cdrozdowski

Hi,
I love SearchPane but have a significant issue with the announcement blog post ( https://datatables.net/blog/2017-11-30 ).

It provides this example for calling rebuild():
table.searchPane.rebuild();

But when that code is run an error occurs.
When I make searchPane plural, the code runs correctly:
table.searchPanes.rebuild();

Thank you so much for creating DataTables and especially this excellent extension.

cdrozdowski

Hi,

I suppose I should have put this into GitHub but I put it here in case anyone else comes upon it.

When SearchPane is used in combination with Bootstrap (at least BS3- I didn't test BS4), items in the panes render very poorly. Font face,color, weight, are all wrong.

Here is an example: https://jsfiddle.net/2ktryhzc/

This stems from the fact that "label" is used as a class name for the items in the pane. BS also has a "label" class and thus the issue arises.

Maybe another class name should be used for items in the panel.

allan

Thanks for pointing that out - I'll update the post.

Allan

MrMoins

Hi! Thanks a lot for this extension.
How can I got this working with server-side processing?

I'm returning JSON Objects and table display correctly but the searchpane only display lists of [object Object]

jholtzman

This is related to the orthogonal data discussion, @allan ...

I have a situation where the filter pane is not working on a column that has a custom render function that displays an icon followed by the data of the cell.

function renderEventStatus(data, type, row) {
    var status = row.event_status;
    var iconFile = getStatusIcon(status);
    var tooltip = status;
    var s = "<img src='images/" + iconFile  + "' alt='" + status +
        "' title='" +  tooltip +
        "' height='15' width='17'/> " + data;
    return  s;
}

The getStatusIcon function just returns the name of an icon file based on the value of the status column, which is hidden.

As things stand, I would love to deploy this to my users, but can't.

allan

@MrMoins - Currently it does not work with server-side processing, as discussed else where in this thread.

@jholtzman - In the dataTables.searchPane.js file change:

            var data = column
                .data()
                .unique()
                .sort()
                .toArray();

To be:

            var data = table
                .cells( null, column.index() )
                .render('filter')
                .unique()
                .sort()
                .toArray();

That should do it (although looking at your rendering function, you'll need to update that to consider the type === 'filter' case).

Allan

Clearwater

Can you specify which columns you do not want to appear in the SearchPlane, but you still want the columns to show in the table. For example, I would display "case number , longitude and latitude in the table but never in the SearchPlane. Thanks

allan

Yes, using the columns option documented in the blog post.

Allan

Clearwater

Is there a way to clear the state of the searchpane? I want to save the state of the table, but not the searchpane.

I've tried:

$('#DAD').dataTable().on('stateSaveParams.dt', function (e, settings, data) {
data.search.search = "";
})

allan

I'm afraid not. The search page uses the search state directly from the DataTable. Its either both or none.

Allan

Clearwater

Can we link the the searchpane to columns visibility?

Clearwater

Last comment: We are using the searchpane in production

allan

Not directly, although that is a good idea (added to the list). At the moment you'd need to set up the column selector to match the column visibility, but that would only hold true if you don't then allow the user to dynamically change the column visibility.

Allan

Omranic

@allan This experimental plugin is really awesome, is there any news about stabilizing and releasing anytime soon? Also the server-side feature support is really needed, this could save tons of custom coding developing simple filters.

J33g73

DataTables has been excellent for replacing the basic SharePoint webpart lists. While trying to implement the Search Pane I find I'm only receiving the headings rather than the data to filter. I've tried using searchPane: true, searchPane: {columns: [':contains("colname")'], threshold: 0}, and searchPane: {columns: ['colname:name'], threshold: 0}. I see the Search Pane works for tables already inline on the page, I'm wondering, as I'm using the ajax option to retrieve the data, if there is a sequence issue occurring. Although I'm hoping it's something simple I've missed or forgot to add.

I've also downloaded both the js and css multiple times thinking the download was corrupt but so far no success.

J33g73

It was something simple that was missing. The problem was fixed by changing from IE8 to IE11 as the current CSS for Search Pane uses CSS3 properties.

As I'm forced to use IE8 in my environment the next step will be to configure the CSS to work with IE8.

Clearwater

Any idea what is the limit for the SearchPane based on. We get an error at about 150K rows.

Uncaught RangeError: Maximum call stack size exceeded
at s.flatten (datatables.min.js:110)

Clearwater

The answer to my question seems to be the limit is based on which browser you are using. Firefox the winner by far handling about 500,000 rows. Chrome second with about 100,000 rows. I'm not sure if the limit is based on number of rows or row size. .

adarshmadrecha

@allan Any update on when this will be releasing this as a plugin/extention.

Leigh

This will make a fantastic addition to DataTables.

I've just dropped it into my current project to have a play, and it's working perfectly.

I would ideally like to see this functionality exposed like the filter options in Excel (something like this: https://www.howtoexcel.info/Images/Filter_Blanks/excel_to_filter_blanks2.JPG), but this is great, and fills a functionality whole that I feel has been missing from DataTables.

Thanks Allan!