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.
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.
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;
}
... 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.
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.
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.
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.
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.
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
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 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.
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.
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. .
Replies
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.
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
We are looking forward to working with this. I'm sure we will need support in the near future. Especially with CSS.
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 issearchPanes.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:
Thanks
Karlo
In answering one of my own questions above:
I found that this is possible by just writing:
... 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.
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
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.
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.
Didn't have time to fully investigate but i think it's awesome so far. please continue development in this direction
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.
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.
Thanks for pointing that out - I'll update the post.
Allan
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]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.
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.
@MrMoins - Currently it does not work with server-side processing, as discussed else where in this thread.
@jholtzman - In the
dataTables.searchPane.jsfile change:To be:
That should do it (although looking at your rendering function, you'll need to update that to consider the
type === 'filter'case).Allan
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
Yes, using the
columnsoption documented in the blog post.Allan
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 = "";
})
I'm afraid not. The search page uses the search state directly from the DataTable. Its either both or none.
Allan
Can we link the the searchpane to columns visibility?
Last comment: We are using the searchpane in production
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
@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.
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.
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.
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)
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. .
@allan Any update on when this will be releasing this as a plugin/extention.
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!