I guess this hasn't been added to the production version or am I doing something wrong ?
Option to match column visibility
I have things mostly working but it would be nice if search panes for hidden columns would not
be shown. I use the columns option to select the columns to have a search pane for.
I also had some problems with the download builder and bootstrap4 e.g. it didn't include
the bootstrap4 classes in the .js file. Eventually I just downloaded the CDN version and that one was
fine. So just as information for people that are using bootstrap4.
Other then that great work I added support to my application in a couple of hours after looking at the different
examples and reading the well written documentation.
I have things mostly working but it would be nice if search panes for hidden columns would not
be shown. I use the columns option to select the columns to have a search pane for.
We decided that it would be useful for hidden columns to still be searchable. We've got a case open for it (DD-1115 for my reference) that's on hold waiting other people's thoughts here, so thank you for yours. One thing to note, this may be more noticeable if the Colvis Buttons was being used as columns would be dynamically coming and going. What are other people's opinions about this?
I've raised the BS4 issues (DD-1343 for my reference), and we'll report back when it's been investigated.
Ok thanks for the info. Yes I'm using ColVis buttons to change the view dynamically.
And yes it might not be to bad to be able to search for those particular columns. I was
just wondering if I was missing something but it seems its working as designed.
@colin@allan Just wanted to say thanks for this release version - I have to say I hadn't had a chance to test it again since we were posting before the new year and you guys did an amazing job on the speed. It is so much faster it blows me away.
@allan It is definitely handy being able to search hidden columns.
As far as feature requests, it would still be very handy to have column level filters available, something a bit closer to Excel filters - numbers above/below something else, words starting/ending with a string, etc. and of course server-side support. I have to say speed was my biggest concern and that's quite fixed so I don't have a lot else to request right now.
Three quick bugs I'm noticing, two related to cascade and the other the bs4 style:
- When using cascade: true, sometimes when I click a filter option I need to double click it (turn it on/off/on) to get it to update the counts on the other filters.
- Also when using cascade: true, if the filter has a "No data" option and it is selected, it filters the table fine, but none of the other filters have their counts updated. If I click on them, it definitely filters the table appropriately, but visually the count is wrong.
- When using the bs4 styling and columns-4 or columns-5, I've noticed the flex-direction: column !important; property on div.dtsp-columns-4 div.dtsp-topRow causes the search control to break across two lines. Meaning that the text box appears on the row above the other search controls. Just overriding the value of flex-direction (to row) helped. This can be fixed on the end-user, but I figure the pre-built templates shouldn't cause issues like this.
For reference, I'm running the current nightly build and experiencing these issues.
Thanks again for this great addition to the product.
As far as feature requests, it would still be very handy to have column level filters available, something a bit closer to Excel filters - numbers above/below something else, words starting/ending with a string, etc.
I'm not sure what that is - could that be addressed with custom filtering, like this?
and of course server-side support.
That's being worked on currently!
Thanks for the bugs, please see comments below:
When using cascade: true, sometimes when I click a filter option I need to double click it (turn it on/off/on) to get it to update the counts on the other filters
I've not seen that - are you seeing it on this example?
Also when using cascade: true, if the filter has a "No data" option ...
Again, I've not seen that, and am not seeing it here. Is that what you meant?
When using the bs4 styling
I've raised this internally (DD-1351 for my reference) and we'll report back here when there's an update.
@colin Not seeing the bug on your examples, not sure if it matters, but in my case the table has around 10,500 rows and is loaded via Ajax. When I select the "No data" item the actual table filters fine, but there is no effect on the other filters. The need to click on/off/on more than once seems to be gone, but the cascade not updat
On the same page I've noticed that at least one other option when selected does not update the filter with the "No data" option on it. Seems to be happening consistently. Still running the nightly build of search panes (but the 1.10.20 release of Datatables). If I click other filters on and off a number of times sometimes all filters properly refresh.
Is there a better way I can share the issue I'm seeing with you?
A new idea:
Another thing I've noticed, when filter controls are turned on, if the filter is on the narrower side and there is a longer name for the column the column name gets cut off by the text box display. This didn't happen in the early builds (since the title was juts an non-interactive text field. It might be worth having some sort of specific option for a filter title.
@colin For what it's worth, my problems with filters not updating disappeared when I changed stateSave to false. I tried changing the sample links you sent me to stateSave = true, but didn't see it happen there.
A final issue I noticed compared to the initial releases is that previously you could build custom render text with if (type === "filter") whereas now that doesn't seem to work and you need to use if (type !== "sort" && type !== "type") as per one of the examples. Not sure why the filter type doesn't flag anymore, but that definitely caused a bit of confusion over here.
@prgmr1 Sorry for the delay, but I am looking into this now.
Regarding your last point - which example are you seeing that in? Could you possibly create a test case please? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
First of all I want to thank all the people involved again for this wonderful extension! Now I'm implementing it in a 3rd project I'm working on and I've found a potential issue (the might not be fixable but I'll post it nonetheless as it might be of common concern).
For most of the tables in the project I'm working on, we have implemented the responsive plugin, selection checkboxes and a "controls" column. Hence, we extended Datatables defaults to sort on the 4th column by default (as it would make no sense to sort on a selection/responsive control column for example).
Now when activating searchpanes, there's a problem as each pane is implemented as its own table, and hence takes the "overwritten" defaults defined above and tries to apply sorting on a column that doesn't exist as it's not a table respecting the "general datatable template" for this project.
There is 2 potential solutions I would see:
1. Update Datatables so that it is possible to define multiple "default settings" that could be applied for example to all tables with a specific class (there might be another mechanism that would be better, but the general idea would be to let users define multiple "default options sets" that they could then apply to their tables as they want.
2. When performing the sorting operation (in _fnSortFlatten), ensure the column exists before trying to sort and if not, revert to sorting on first column found.
Is there a way to refresh the searchpanes when reloading new data in the table? For example I have a select box outside of my table which lets the user filter data by owner, after which the table is re-initialized by calling the table.ajax.reload();, but the search panes are not updated accordingly (I don't know if it's due to state saving or just that i should chain the table.ajax.reload() with something else... any help would be greatly appreciated
@kthorngren I tried using this table.ajax.reload(() => table.searchPanes.rebuildPane()); but it seems to still cause trouble (especially performance problems which start to appear pretty quickly)
After a couple operations (changing filters), then updating the data by changing data owner and calling the line above, the function SearchPane.prototype._updateCommon is being called > 400 times for a single new select on a given pane!
I will try to investigate what can cause this performance worsening case.
In case you were wondering if the call above was the cause for the function to be called over and over, I would highly doubt it as it's only called once every time the data owner filter is changed like so:
It seems to me like there are some event handlers that are not being "unregistered" or others that are added even if already present on the element. For example in my scenario, after changing the owner filter about 5 times (hence reloading the table and calling table.searchPanes.rebuildPane(), a single selection in one of the panes causes the select handler registered on s.dtPane 25 times and the function SearchPane.prototype._updateCommon handler to be called a whopping 145 times!
Thanks for reporting, I'm trying to reproduce with a fiddle and I'm seeing odd things. I've raised it internally (DD-1372 for my reference) and we'll report back here when there's an update.
Please can we report any further SearchPanes issues in their own thread so they'll be easier to track - it'll get messy if multiple issues are reported here.
I would propose using the github issue tracker maybe? I opened an issue related to this (using my personal account) so that might be the better place to continue on that?
We tend to prefer it here, as it's easier for others to search for the same issue. The git stuff is good for pull requests, but we don't use it for tracking.
When using the bs4 styling and columns-4 or columns-5, I've noticed the flex-direction: column !important; property on div.dtsp-columns-4 div.dtsp-topRow causes the search control to break across two lines. Meaning that the text box appears on the row above the other search controls. Just overriding the value of flex-direction (to row) helped. This can be fixed on the end-user, but I figure the pre-built templates shouldn't cause issues like this.
This is actually intentional that it will split the display of the input for the search and the buttons over two rows. When the column for the pane is narrow (262px I think) it will drop the buttons onto a second row - we were finding that having it all on a simple row just made it too squashed.
Very happy to see this become an official extension! I've been using the original prototype for some time now, and it's proved invaluable. I notice this 1.0 release is pretty much a rewrite though, and it's not a drop in replacement (at least it wasn't for me). The old look is gone (I found the original look cleaner, but I can re-style myself to match the old look) and the "container" option appears to have been dropped, for example.
How can I achieve the container functionality with this new release? I always placed the panes in a collapsable filter panels outside of the datatable.
Replies
Awesome!
I guess this hasn't been added to the production version or am I doing something wrong ?
I have things mostly working but it would be nice if search panes for hidden columns would not
be shown. I use the columns option to select the columns to have a search pane for.
I also had some problems with the download builder and bootstrap4 e.g. it didn't include
the bootstrap4 classes in the .js file. Eventually I just downloaded the CDN version and that one was
fine. So just as information for people that are using bootstrap4.
Other then that great work I added support to my application in a couple of hours after looking at the different
examples and reading the well written documentation.
We decided that it would be useful for hidden columns to still be searchable. We've got a case open for it (DD-1115 for my reference) that's on hold waiting other people's thoughts here, so thank you for yours. One thing to note, this may be more noticeable if the Colvis Buttons was being used as columns would be dynamically coming and going. What are other people's opinions about this?
I've raised the BS4 issues (DD-1343 for my reference), and we'll report back when it's been investigated.
Colin
Ok thanks for the info. Yes I'm using ColVis buttons to change the view dynamically.
And yes it might not be to bad to be able to search for those particular columns. I was
just wondering if I was missing something but it seems its working as designed.
@colin @allan Just wanted to say thanks for this release version - I have to say I hadn't had a chance to test it again since we were posting before the new year and you guys did an amazing job on the speed. It is so much faster it blows me away.
@allan It is definitely handy being able to search hidden columns.
As far as feature requests, it would still be very handy to have column level filters available, something a bit closer to Excel filters - numbers above/below something else, words starting/ending with a string, etc. and of course server-side support. I have to say speed was my biggest concern and that's quite fixed so I don't have a lot else to request right now.
Three quick bugs I'm noticing, two related to cascade and the other the bs4 style:
- When using cascade: true, sometimes when I click a filter option I need to double click it (turn it on/off/on) to get it to update the counts on the other filters.
- Also when using cascade: true, if the filter has a "No data" option and it is selected, it filters the table fine, but none of the other filters have their counts updated. If I click on them, it definitely filters the table appropriately, but visually the count is wrong.
- When using the bs4 styling and columns-4 or columns-5, I've noticed the
flex-direction: column !important;property ondiv.dtsp-columns-4 div.dtsp-topRowcauses the search control to break across two lines. Meaning that the text box appears on the row above the other search controls. Just overriding the value offlex-direction(torow) helped. This can be fixed on the end-user, but I figure the pre-built templates shouldn't cause issues like this.For reference, I'm running the current nightly build and experiencing these issues.
Thanks again for this great addition to the product.
I'm not sure what that is - could that be addressed with custom filtering, like this?
That's being worked on currently!
Thanks for the bugs, please see comments below:
I've not seen that - are you seeing it on this example?
Again, I've not seen that, and am not seeing it here. Is that what you meant?
I've raised this internally (DD-1351 for my reference) and we'll report back here when there's an update.
Cheers,
Colin
@colin Not seeing the bug on your examples, not sure if it matters, but in my case the table has around 10,500 rows and is loaded via Ajax. When I select the "No data" item the actual table filters fine, but there is no effect on the other filters. The need to click on/off/on more than once seems to be gone, but the cascade not updat
On the same page I've noticed that at least one other option when selected does not update the filter with the "No data" option on it. Seems to be happening consistently. Still running the nightly build of search panes (but the 1.10.20 release of Datatables). If I click other filters on and off a number of times sometimes all filters properly refresh.
Is there a better way I can share the issue I'm seeing with you?
A new idea:
Another thing I've noticed, when filter controls are turned on, if the filter is on the narrower side and there is a longer name for the column the column name gets cut off by the text box display. This didn't happen in the early builds (since the title was juts an non-interactive text field. It might be worth having some sort of specific option for a filter title.
@colin For what it's worth, my problems with filters not updating disappeared when I changed
stateSavetofalse. I tried changing the sample links you sent me tostateSave = true, but didn't see it happen there.The easiest way would be to modifly my test cases if you can, but if not, feel free to PM me the link to your site and we'll take a nose.
I'm not following that, sorry, could you update my test case, please. That should be possible with that one.
Colin
@colin I'll see what I can do and DM you with the cascade/filter issue.
The second can be seen here: https://datatables.net/extensions/searchpanes/examples/customisation/customHeader.html with the
Length of Lifecolumn. Some CSS styling could do, so this was mostly an issue due to the textbox setup.A final issue I noticed compared to the initial releases is that previously you could build custom render text with
if (type === "filter")whereas now that doesn't seem to work and you need to useif (type !== "sort" && type !== "type")as per one of the examples. Not sure why thefiltertype doesn't flag anymore, but that definitely caused a bit of confusion over here.@prgmr1 Gotcha, thanks for that link. I've raised it internally (DD-1362 for my reference) and we'll report back here when there's an update.
Cheers,
Colin
@prgmr1 Sorry for the delay, but I am looking into this now.
Regarding your last point - which example are you seeing that in? Could you possibly create a test case please? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Thanks,
Sandy
Hey there!
First of all I want to thank all the people involved again for this wonderful extension! Now I'm implementing it in a 3rd project I'm working on and I've found a potential issue (the might not be fixable but I'll post it nonetheless as it might be of common concern).
For most of the tables in the project I'm working on, we have implemented the responsive plugin, selection checkboxes and a "controls" column. Hence, we extended Datatables defaults to sort on the 4th column by default (as it would make no sense to sort on a selection/responsive control column for example).
Now when activating searchpanes, there's a problem as each pane is implemented as its own table, and hence takes the "overwritten" defaults defined above and tries to apply sorting on a column that doesn't exist as it's not a table respecting the "general datatable template" for this project.
There is 2 potential solutions I would see:
1. Update Datatables so that it is possible to define multiple "default settings" that could be applied for example to all tables with a specific class (there might be another mechanism that would be better, but the general idea would be to let users define multiple "default options sets" that they could then apply to their tables as they want.
2. When performing the sorting operation (in _fnSortFlatten), ensure the column exists before trying to sort and if not, revert to sorting on first column found.
Thanks again for your effort!
I would also have another question/comment.
Is there a way to refresh the searchpanes when reloading new data in the table? For example I have a select box outside of my table which lets the user filter data by owner, after which the table is re-initialized by calling the
table.ajax.reload();, but the search panes are not updated accordingly (I don't know if it's due to state saving or just that i should chain thetable.ajax.reload()with something else... any help would be greatly appreciatedAs always, keep up the good work!
The
searchPanes.rebuildPane()is used to update the search panes after a data update.Kevin
@kthorngren I tried using this
table.ajax.reload(() => table.searchPanes.rebuildPane());but it seems to still cause trouble (especially performance problems which start to appear pretty quickly)After a couple operations (changing filters), then updating the data by changing data owner and calling the line above, the function
SearchPane.prototype._updateCommonis being called > 400 times for a single new select on a given pane!I will try to investigate what can cause this performance worsening case.
In case you were wondering if the call above was the cause for the function to be called over and over, I would highly doubt it as it's only called once every time the data owner filter is changed like so:
It seems to me like there are some event handlers that are not being "unregistered" or others that are added even if already present on the element. For example in my scenario, after changing the owner filter about 5 times (hence reloading the table and calling
table.searchPanes.rebuildPane(), a single selection in one of the panes causes theselecthandler registered ons.dtPane25 times and the functionSearchPane.prototype._updateCommonhandler to be called a whopping 145 times!Thanks for reporting, I'm trying to reproduce with a fiddle and I'm seeing odd things. I've raised it internally (DD-1372 for my reference) and we'll report back here when there's an update.
Please can we report any further SearchPanes issues in their own thread so they'll be easier to track - it'll get messy if multiple issues are reported here.
Cheers,
Colin
I would propose using the github issue tracker maybe? I opened an issue related to this (using my personal account) so that might be the better place to continue on that?
We tend to prefer it here, as it's easier for others to search for the same issue. The git stuff is good for pull requests, but we don't use it for tracking.
What's current status of server-side AJAX requests support?
That's in progress - being worked on right now.
Colin
@colin, is there ETA or project plans I can track?
Sorry, no. If you keep an eye on the forum or blog, we announce releases when they happen.
Colin
Regarding this point:
This is actually intentional that it will split the display of the input for the search and the buttons over two rows. When the column for the pane is narrow (262px I think) it will drop the buttons onto a second row - we were finding that having it all on a simple row just made it too squashed.
Allan
Very happy to see this become an official extension! I've been using the original prototype for some time now, and it's proved invaluable. I notice this 1.0 release is pretty much a rewrite though, and it's not a drop in replacement (at least it wasn't for me). The old look is gone (I found the original look cleaner, but I can re-style myself to match the old look) and the "container" option appears to have been dropped, for example.
How can I achieve the container functionality with this new release? I always placed the panes in a collapsable filter panels outside of the datatable.
Thanks
I think the
searchPanes.container()API replaces thecontaineroption in the original code.Kevin
I thought that was a getter, and not a setter?
Originally, I was able to do this:
{
container: '#subFilter' + index + ' div.panel-body'
}
You can use it to get the container then place it where you want. See this example:
https://datatables.net/extensions/searchpanes/examples/initialisation/initialisationOutside.html
Kevin
Thanks Kevin! I'll take a look...