It's using Flexbox elements - if you look at the CSS you'll see how the flex containers are defined. These then give the position for the SearchPanes panels (that's the 'P' in the dom).
@colin great! Really nice to see it take shape like this, this is one of the really nice new features coming to Datatables IMO.
And the improvements will greatly help it being useful to me and surely others too!
(I was about to come and comment that it was fixed as I manually checked the nightly this morning and it had the fixed cFeature, so I had realized it was fixed on your side now
Also, the cascade feature is really a nice one! Remains to see how it performs in high data quantity scenarios as I guess it is a pretty heavy feature, but it works really well at least in the sample provided above by adding the cascadePanes: true to the initialization (hope I don't screw something by directly mentioning the option here if it was going to be changed, but I sure hope not hehe)
No, nothing will really change much before the release, just a few creases to be ironed out still. The documentation and examples are written, so when that's up on the website it will make all the options a bit easier to understand.
Hey there, me again. Quick comment/feature suggestion. If using cascadePanes, it would be nice (if not already possible) to be able to select multiple options within a single pane. For example in the jsBin you posted above, if you set the cascadePanes:true option and you select one of the positions in the first table, it automatically filters out the remaining options from the "current" table, maybe it could be possible to not filter out the options in the same table from which a selection was made?
This would give a feature similar to what's available in Excel when you have checkboxes in the column filter and you can select one or more of the options, from which the rest of the table will be updated.
* I want to insist that this is not to be negative or anything like that and I know you already have a lot on your plate hehe. The searchPanes feature is already really great! I just thought it could be a good idea to mention it in case of future updates/feature additions
I have 3 searchPanes and with the new version the page is very laggy.
Also it would be cool to have an option to spread the column out. In the old version I did this with CSS Columns.
Also I am not familiar with how the dom works. But i dont see an easy was to make the searchPanes responsive that if the screen is too small the searchPanes should move back to on top.
@yakov116 the Dom option is there for you to generate the layout of the datatables elements the way you like it. In my opinion, you could probably surround the 'P' element in the dom with a custom wrapper element and apply styling on it as you see fit.
maybe it could be possible to not filter out the options in the same table from which a selection was made?
It is possible - but a bit clunky. If scroll to the end of the list and hold down shift, when you then click on an item, it also selects everything before it. You can then deselect the ones you don't want. Not particularly intuitive. I've raised your enhancement and we'll try and get it in!
I want to insist that this is not to be negative or anything like that and I know you already have a lot on your plate hehe.
@colin and @sandy you didn't publicize it yet here but I saw you made some edits in the repo and now the cascade selection works really well in the demo link above!
Effectively, it now seems possible to perform multiple selection in a pane and the cascading options seems to respond really well!
Excellent job guys
Now, if I may, I think there might still be some quirks around and I might have found some (sorry )
1. Go to the demo link provided by @colin above
2. In the initialization, set cascadePanes: true
3. Select the first 3 options from the Position pane (shift click or ctrl click as you want)
4. Then select San Francisco in the Office pane
5. --> (first small problem) The salary pane is not updated to only show the options related to the new selection.
6. Then deselect San Francisco --> The Position pane will update and only Developer option will be selected
7. Then change the selection in the Position pane --> The Salary pane will update correctly, but not the Office pane, which stays stuck with the options remaining from the first selection of 3 "positions" in step 3
@setwebmaster, I obviously can't speak directly for @colin or @sandy, but I can say based on my many questions here on the forum that I've never received anything less than exceptional support from the Datatables team!
In fact, I've seen some outrageous jerks post here and @allan and his team have always been professional in their responses and appreciative of constructive feedback.
In short -- although I'm only a member of the community, they've always made me feel as though I'm part of the team, so I'd say don't feel the need apologize for helping them make these products even better!
In fact, I'm very much looking forward to the Search pane and I hope it's as wrung-out as much as possible before it's fielded, so I'm greatly appreciative your comments are helping them to move closer to that.
@Loren Maxwell Ahah yeah I know I might apologize too much, but I think it's better this way than some comments I saw in which people seem to think that open source code contributors almost owe it to them to fix whatever problem they have right away.
I, as you, think the team is working as hard as they can to provide both an excellent product, great documentation, and good forum support (I won't talk about the blog here ahah )
I'm just really grateful for all the work that's being done here and that's why I try my best to keep a positive/constructive stance to my comments (plus the apologizing ahah)
Moreover, I think the bugs I have found might have been caused by the changes that were made partially due to my comment about the multiple selection in a single pane.
There effectively seems to be something strange within the selection logic when performing multiple selections in different panes as in one case, it is expected that for the "current" pane being selected, the options won't disappear to permit multiple selection, but at the same time, the other panes should be updated, which might in turn also affect the one we are currently selecting from... (Not sure about this one though as it might be a non-issue).
The way I see it, once a selection has been made in a first pane, if the cascadePanes is set, the other panes will be updated accordingly. So when we perform further "filtering" selection in other panes, it should update all the other panes except itself, which should not be a big problem as it only further reduces the amount of options available. There may be a problem with the data source used to perform further filtering... really not sure
Thanks for the kind words, glad to know we're appreciated
For the cascadePanes feature - that's still a work-in-progress. The changes did come from your earlier suggestion, so as you say they're heading in that direction with a few creases to work out still (the jira is still open). I've added your words into it, so @sandy can take a nose (he's the dev on this one, I'm the QAer).
There's about a dozen outstanding issues, then we'll be ready to make the formal release hopefully in a couple of weeks.
@colin, you guys certainly are appreciated. I don't want to hijack this thread and move it away from the Search Pane discussion proper, but I can absolutely say my site wouldn't be a shadow of what it is today if not for Datatables, the plugins, and the Editor.
Hey @colin and @sandy the last update (nightly) really seems to have improved the cascade feature by a lot! (I couldn't find any obvious issue with it while fiddling around).
Great job, that's a really great addition to the Datatables plugin! I think I will start using the nightly and try to follow along with the future changes that will be brought in the plugin.
(eager for the official release hehe )
Thanks a lot for the work here !
I am trying to use the nightly and I have an issue to report and a question to ask.
Let's start with what's seems to me as an issue :
Let's say you have an existing Datatable, configured with state saving (stateSave: true) that you have already displayed once in the past in your browser. Thus, you have an entry in your localStrorage corresponding to the table state.
Now when you add the searchPane extension and display the table again, it crashes with following exception in dataTables.searchPanes.js:874 :
Uncaught TypeError: Cannot read property 'length' of undefined
at SearchPane._reloadSelect (dataTables.searchPanes.js:874)
at SearchPane._buildPane (dataTables.searchPanes.js:466)
at new SearchPane (dataTables.searchPanes.js:128)
at _Api.<anonymous> (dataTables.searchPanes.js:1582)
at _Api.each (jquery.dataTables.js:6952)
at SearchPanes._startup (dataTables.searchPanes.js:1581)
at HTMLTableElement.<anonymous> (dataTables.searchPanes.js:1280)
at HTMLTableElement.i (jquery-3.3.1.min.js:2)
at HTMLTableElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLTableElement.y.handle (jquery-3.3.1.min.js:2)
Seems to me that the condition in _reloadSelect function
if (loadedFilter === undefined) {
return;
}
should also be extended to
|| loadedFilter.searchPanes === undefined
as the table can have a saved state but not the searchPane extension (as it is newly added).
Do not hesitate to tell me if I am wrong here.
Now here is my question :
Is it possible to display the pane with only the column name and list of choices. That means without the search input, clear buttons and sort buttons ?
I've added an enhancement request to remove the remaining information, though in the meantime you can add $('.dtsp-subRowsContainer').hide(); to remove the bar at the top - see here: http://live.datatables.net/mimogova/1/edit
That's great, thanks a lot !
It's exactly what I needed !
I've added clear: false and .dtsp-title { display:none; } to hide the last remaining other texts displayed on top (active filters count and clear all button).
Thanks again !
Have you also had time to look at the issue I encountered with state saving ?
Is it me doing something wrong ?
Ah, I missed that - yep, I've reproduced it too. I've raised it internally (DD-1240 for my reference) and we'll report back here when there's an update.
Replies
All right, thanks for the prompt reply
@setwebmaster all fixed now, see here: http://live.datatables.net/koladoxo/1/edit
starting to take shape!
C
WOW!!
Can you give an example with the Search Pane on the side (In one long list)
Hi @yakov116 ,
You mean something like this!
Cheers,
Colin
Yes! Thanks
What is this line doing?
dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>',It's using Flexbox elements - if you look at the CSS you'll see how the flex containers are defined. These then give the position for the SearchPanes panels (that's the
'P'in thedom).C
These recent updates towards the finished product look amazing. Very excited about getting this out there with the new features.
Thank you for doing things like this that make usability just that much more engaging.
@colin great! Really nice to see it take shape like this, this is one of the really nice new features coming to Datatables IMO.
And the improvements will greatly help it being useful to me and surely others too!
(I was about to come and comment that it was fixed as I manually checked the nightly this morning and it had the fixed
cFeature, so I had realized it was fixed on your side nowAlso, the cascade feature is really a nice one! Remains to see how it performs in high data quantity scenarios as I guess it is a pretty heavy feature, but it works really well at least in the sample provided above by adding the
cascadePanes: trueto the initialization (hope I don't screw something by directly mentioning the option here if it was going to be changed, but I sure hope not hehe)Thanks for the kind words, @glimpsed_chaos and @setwebmaster .
No, nothing will really change much before the release, just a few creases to be ironed out still. The documentation and examples are written, so when that's up on the website it will make all the options a bit easier to understand.
Hey there, me again. Quick comment/feature suggestion. If using cascadePanes, it would be nice (if not already possible) to be able to select multiple options within a single pane. For example in the jsBin you posted above, if you set the
cascadePanes:trueoption and you select one of the positions in the first table, it automatically filters out the remaining options from the "current" table, maybe it could be possible to not filter out the options in the same table from which a selection was made?This would give a feature similar to what's available in Excel when you have checkboxes in the column filter and you can select one or more of the options, from which the rest of the table will be updated.
* I want to insist that this is not to be negative or anything like that and I know you already have a lot on your plate hehe. The searchPanes feature is already really great! I just thought it could be a good idea to mention it in case of future updates/feature additions
@colin thanks!
Small feedback/issue:
I have 3 searchPanes and with the new version the page is very laggy.
Also it would be cool to have an option to spread the column out. In the old version I did this with CSS Columns.
Also I am not familiar with how the
domworks. But i dont see an easy was to make the searchPanes responsive that if the screen is too small the searchPanes should move back to on top.Thanks
@yakov116 the Dom option is there for you to generate the layout of the datatables elements the way you like it. In my opinion, you could probably surround the 'P' element in the dom with a custom wrapper element and apply styling on it as you see fit.
Hi @setwebmaster ,
It is possible - but a bit clunky. If scroll to the end of the list and hold down shift, when you then click on an item, it also selects everything before it. You can then deselect the ones you don't want. Not particularly intuitive. I've raised your enhancement and we'll try and get it in!
No worries, feedback is always useful
Cheers,
Colin
Hi @yakov116 ,
Are you able to link to a test case for this - it would be interesting to diagnose the lag.
And hope that
domdid the trick for you,Cheers,
Colin
@colin and @sandy you didn't publicize it yet here but I saw you made some edits in the repo and now the cascade selection works really well in the demo link above!
Effectively, it now seems possible to perform multiple selection in a pane and the cascading options seems to respond really well!
Excellent job guys
Now, if I may, I think there might still be some quirks around and I might have found some (sorry
)
1. Go to the demo link provided by @colin above
2. In the initialization, set
cascadePanes: true3. Select the first 3 options from the
Positionpane (shift click or ctrl click as you want)4. Then select San Francisco in the
Officepane5. --> (first small problem) The salary pane is not updated to only show the options related to the new selection.
6. Then deselect San Francisco --> The
Positionpane will update and only Developer option will be selected7. Then change the selection in the
Positionpane --> TheSalarypane will update correctly, but not theOfficepane, which stays stuck with the options remaining from the first selection of 3 "positions" in step 3@setwebmaster, I obviously can't speak directly for @colin or @sandy, but I can say based on my many questions here on the forum that I've never received anything less than exceptional support from the Datatables team!
In fact, I've seen some outrageous jerks post here and @allan and his team have always been professional in their responses and appreciative of constructive feedback.
In short -- although I'm only a member of the community, they've always made me feel as though I'm part of the team, so I'd say don't feel the need apologize for helping them make these products even better!
In fact, I'm very much looking forward to the Search pane and I hope it's as wrung-out as much as possible before it's fielded, so I'm greatly appreciative your comments are helping them to move closer to that.
I'm sure they'd say the same thing.
Great job to you and Datatables!
@Loren Maxwell Ahah yeah I know I might apologize too much, but I think it's better this way than some comments I saw in which people seem to think that open source code contributors almost owe it to them to fix whatever problem they have right away.
I, as you, think the team is working as hard as they can to provide both an excellent product, great documentation, and good forum support (I won't talk about the blog here ahah
)
I'm just really grateful for all the work that's being done here and that's why I try my best to keep a positive/constructive stance to my comments (plus the apologizing ahah)
Moreover, I think the bugs I have found might have been caused by the changes that were made partially due to my comment about the multiple selection in a single pane.
There effectively seems to be something strange within the selection logic when performing multiple selections in different panes as in one case, it is expected that for the "current" pane being selected, the options won't disappear to permit multiple selection, but at the same time, the other panes should be updated, which might in turn also affect the one we are currently selecting from... (Not sure about this one though as it might be a non-issue).
The way I see it, once a selection has been made in a first pane, if the
cascadePanesis set, the other panes will be updated accordingly. So when we perform further "filtering" selection in other panes, it should update all the other panes except itself, which should not be a big problem as it only further reduces the amount of options available. There may be a problem with the data source used to perform further filtering... really not sureAgain, keep up the good work guys!
Hi @Loren Maxwell and @setwebmaster ,
Thanks for the kind words, glad to know we're appreciated
For the
cascadePanesfeature - that's still a work-in-progress. The changes did come from your earlier suggestion, so as you say they're heading in that direction with a few creases to work out still (the jira is still open). I've added your words into it, so @sandy can take a nose (he's the dev on this one, I'm the QAer).There's about a dozen outstanding issues, then we'll be ready to make the formal release hopefully in a couple of weeks.
Cheers,
Colin
@colin, you guys certainly are appreciated. I don't want to hijack this thread and move it away from the Search Pane discussion proper, but I can absolutely say my site wouldn't be a shadow of what it is today if not for Datatables, the plugins, and the Editor.
Its a private repo. I can give you access to it if you would like
Please. It would be useful to get a feel for the shape of your tables so we can reproduce locally.
i like it. I tried and felt very effective : https://ades.vn/
Hey @colin and @sandy the last update (nightly) really seems to have improved the cascade feature by a lot! (I couldn't find any obvious issue with it while fiddling around).
Great job, that's a really great addition to the Datatables plugin! I think I will start using the nightly and try to follow along with the future changes that will be brought in the plugin.
)
(eager for the official release hehe
Thanks! There's 3-4 outstanding cascade issues, mostly on multiple selections, but it's getting close...
Hi all !
Thanks a lot for the work here !
I am trying to use the nightly and I have an issue to report and a question to ask.
Let's start with what's seems to me as an issue :
Let's say you have an existing Datatable, configured with state saving (stateSave: true) that you have already displayed once in the past in your browser. Thus, you have an entry in your localStrorage corresponding to the table state.
Now when you add the searchPane extension and display the table again, it crashes with following exception in
dataTables.searchPanes.js:874:Seems to me that the condition in
_reloadSelectfunctionshould also be extended to
as the table can have a saved state but not the searchPane extension (as it is newly added).
Do not hesitate to tell me if I am wrong here.
Now here is my question :
Is it possible to display the pane with only the column name and list of choices. That means without the search input, clear buttons and sort buttons ?
I tried using
but I am still having the input and buttons displayed.
See http://live.datatables.net/fedidera/1/edit
Thanks in advance for the reply.
Baptiste.
Hi @Babillbao ,
This is the most minimum you can currently get to with config options: http://live.datatables.net/fedidera/3/edit .
I've added an enhancement request to remove the remaining information, though in the meantime you can add
$('.dtsp-subRowsContainer').hide();to remove the bar at the top - see here: http://live.datatables.net/mimogova/1/editCheers,
Colin
Hi @Babillbao ,
A new option has been added for you to only show the filters - see here: http://live.datatables.net/nohivavi/4/edit
Cheers,
Colin
Hi @Colin !
That's great, thanks a lot !
It's exactly what I needed !
I've added
clear: falseand.dtsp-title { display:none; }to hide the last remaining other texts displayed on top (active filters count and clear all button).Thanks again !
Have you also had time to look at the issue I encountered with state saving ?
Is it me doing something wrong ?
Cheers !
Baptiste.
Hi @Babillbao
Ah, I missed that - yep, I've reproduced it too. I've raised it internally (DD-1240 for my reference) and we'll report back here when there's an update.
Cheers,
Colin