SearchPanes feature request: Disable multi-select and force a select
SearchPanes feature request: Disable multi-select and force a select
![Loren Maxwell](https://datatables.net/forums/uploads/userpics/907/nQU402M3AJ88T.jpg)
in SearchPanes
Not sure if this has been entertained, but a feature I'd like to see for SearchPanes is the ability to disable multi-select on specific panes and to also identify a pane as requiring at least one select, which I assume would additionally require a preselect as a default or just ignoring a deselect click if there's only one item selected.
If there's currently a way to accomplish either, I'd welcome a point in the right direction!
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Hi @Loren Maxwell,
Firstly, you can disable multi-select by making use of
searchPanes.dtOpts
andselect.style
setting it tosingle
.Secondly, again making use of
searchPanes.dtOpts
, you can useselect.toggleable
and set it tofalse
to do exactly as described above.Take a look at this example - it shows both of the above.
Hope this helps,
Sandy
Wow, that's awesome and easy . . . I was so focused on the searchPanes options that I didn't even think about the
dtOpts
option.Now, suppose I wanted to ensure at least one selection was made across the four tables in the example . . . there's no out of the box solution with the options, right? I'd have to use jQuery and the API to produce that effect?
@Loren Maxwell ,
Afraid so, SearchPanes doesn't communicate between different tables.
Thanks,
Sandy
@sandy, any examples of how a click event on a searchPane row can be detected and how each of the searchPanes can then be accessed and their dtOpts values changed?
I've tried to find something in the documentation and the forums, but haven't seen anything that comes close.
I realize I can create an event listener on
#DataTables_Table_0
and so forth, but I'm hoping there's a solution that would allow scaling regardless of the number of searchPanes in use.Hi @Loren Maxwell ,
Take a look at this example. It shows how you can set a listener for all of the SearchPanes on the page and access the selected rows.
For changing dtOpts on each pane, it will depend a bit on the behaviour that you want. Are you wanting to do a blanket change on all SearchPanes on a select? Or just the one with the select?
You could just configure the tables in the event listener where I am getting the row data. That is easy enough to do for the current SearchPane, or also to iterate through all of them using the
$('.dtsp-searchPane table:visible')
selector. But depending on other config options and api calls, your configuration that you add may be altered bysearchPanes.dtOpts
.If that turns out to be the case then you will probably have to note the selections and reinitialise SearchPanes with your new
searchPanes.dtOpts
and use the previous selections to setcolumns.searchPanes.preSelect
. It will depend on what you are wanting to do.Thanks,
Sandy
@sandy, here's my solution based on your very helpful advice:
http://live.datatables.net/peguwimu/3/edit
This ensures that there is always at least one selection in one of the searchpanes, regardless of how many there are.
For my use, I want the user to be able to filter the data in various ways, but never have access to all the data at once. I've additionally set the
style
to single so the user can't simply select everything in the searchpane to access all the records anyway.A couple of notes for anyone who wants to implement it, plus I';d welcome any improvements anyone might have!
1) Make sure the table is initialized properly by setting
toggleable
to false, apreSelect
for at least one searchpane, andclear
to false to disallow a user from clearing all searchPanes selections in that way:2) Here's an expanded
$(".dtsp-searchPane table:visible")
listener that counts the number of applied selections for all searchpanes onselect
anddeselect
and if it is one then it disablestoggleable
on all searchPanes or enables it if there is at least one selection already applied:Another quick example of what's possible if anyone's interested.
Here I want the user to be able to select only one option between all the seachpanes:
http://live.datatables.net/peguwimu/4/edit
Below is the specific code for
$(".dtsp-searchPane table:visible")
portion (note the difference of using only theselect
event rather than bothselect deselect
as above to avoid infinite recursion):Again, I'd welcome any improvements!
@sandy, ok I tried to implement my second iteration of the searchpane interactions from the post immediately above.
Specifically I want the user to be able to select only one option between all the seachpanes, which I had successfully done here:
http://live.datatables.net/peguwimu/4/edit
However, in implementing, the results are inconsistent as to whether the
$(".dtsp-searchPane table:visible")
actually detects a select on the searchPane.Here's the first case, which works correctly:
https://ghsfha.org/w/Special:SchoolHome?view=development&school=Lovejoy
To see the intended functionality:
1) Select "2015" in the season searchPane; the console will note "a searchPane option was selected"
2) Select "Bradwell Institute" from the opposing program searchPane; "2015" from the season searchPane will be deselected and the console will note "a searchPane option was selected"
3) Select "Bill Young" from the opposing coach searchPane, etc.
Perfect!
However . . .
This page doesn't work:
https://ghsfha.org/w/Special:SchoolHome?view=development&school=Lowndes
To see the issue:
1) Select "2015" in the season searchPane; although the selection changes, no note appears in the console which seems the listener did not recognize the select
2) Select "Americus" from the opposing program searchPane; "2015" from the season searchPane is not deselected and the console does not note "a searchPane option was selected"
3) Select "Al Hughes" from the opposing coach searchPane, etc.
Aside from the data, there should be no difference between the pages, so I can't figure out why one would work and the other would not.
Also, it is consistent between the parameters . . . In other words, the Lovejoy page always works and the Lowndes page never works. Same for other teams that I've tried, they either always work or never work.
Any thoughts?
Ok, I've found the pattern of when a listener will work properly and when it won't.
For teams that have 500 or fewer records (Lovejoy has 343 games) the listener works properly. For over 500 records (Lowndes has 629 games) the listener does not work correctly.
I've tested the SQL to return 500 and 501 records for various teams and everytime a the data has over 500 records the listener does not work properly.
This is true for both Chrome and Firefox.
Is there something in the DataTables select extension that acts oddly when there are more than 500 records? Or in searchPane's use of it on the searchPane itself?
Ok, @sandy, here's a working example building on the previous examples:
http://live.datatables.net/peguwimu/6/edit
This includes a 501 record dataset, so it doesn't work as desired (i.e., it allows multiple searchPanes to have a selection when it should allow only one at a time).
However, delete the very last record and everything works as it should.
Hi @Loren Maxwell ,
This had me stumped for a while! I then remembered that we had added a check a long time ago to try and avoid SearchPanes running before the table was loaded. This was later improved with this, although now the two are merged together.
The 100 ms wait is now unnecessary, as we know that the table is initialised. I've removed it so this will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.
I've updated your most recent live example to use the nightly code and it is now working.
Thanks,
Sandy
Thanks, @sandy!