How to display options of three columns within one dropdown
How to display options of three columns within one dropdown
![[Deleted User]](https://secure.gravatar.com/avatar/6a2d988df9110edf16e6ba3216625610/?default=https%3A%2F%2Fvanillicon.com%2F6a2d988df9110edf16e6ba3216625610_200.png&rating=g&size=120)
Test case: REMOVED
Description of problem: need to show results of area 1, area 2, and area 3 in the "Area" dropdown menu
Test case: REMOVED
Description of problem: need to show results of area 1, area 2, and area 3 in the "Area" dropdown menu
Answers
As I understand it you want the Area search filter to include options from Area 1, Area 2 and Area 3 and to search the three columns when selected, correct?
First you will need to remove column 2 index from the
table.columns([1, 2, 7]).every(function() {
statement in thebuildSelect()
function.Next you will need to create an addition buildSelect like function that first creates the select element then gets the unique data for columns 2,3 and 4 to the slect values values. The
change
event handler will need to search columns 2,3 and 4 withcolumns().search()
. This uses theflatten()
API to convert thecolumns().data()
2D structure to a 1D array. Note the use ofcolumns().data()
is changed twice in the below code.In addition to calling
buildSelect()
you will also need to callbuildAreaSelect()
.I didn't test this code so you may need to do some debugging.
Kevin
Yes, that is correct. Thanks so much!
kthorngren
Hello again, Kevin. Thanks so much for your assistance. Here is my attempt. Is something wrong with my syntax? I see the error Unexpected token ')' on line 152.4 : REMOVED. Also, as you will see, the dropdowns and pagination disappeared. Thank you for helping out a newbie.
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
I copied your code into this test case to have help with where the errors are: REMOVED
Click on the Errors element at the bottom of the Javascript tab. Click on the specific error and it will jump to that spot. Remove the
);
from line 77 in you above code snippet to fix one error. Then remove the}
on line 78 to fix the last error.Kevin
Thank you, Kevin. I think I am getting closer: REMOVED. How do I get the new table to append to the "Area" dropdown? Right now "Area" acts like a link when you hover, but there is no dropdown.
I would change this:
To a
div
, for example:In
buildAreaSelect()
change the selector used to append the select to something like this:See if this works.
Kevin
Thank you, Kevin. I have updated the code but no luck yet. I removed unused scripts but that did not help either. I noticed that if I add "2" back into the first index, the select options appear for "Area 1." I guess that I am not appending correctly: REMOVED
It doesn't look like you are calling the
buildAreaSelect()
function. I would call it after you call thebuildSelect()
function.Kevin
Thanks to your help, I believe I have made some progress. The "Area" dropdown is working but does not list, for example, all areas containing "allied health," which should include two instances.
There are two issues here:
table.columns(2, 3, 4, 5)
will only select column index 2. The 3,4,5 are ignored (seecolumns()
for useage). You could use.columns([2,3,4,5])
, but...What I would suggest you do here is provide a function for the search action
Or something like that!
Allan
Thanks so much, Allan. I added the code and got the dropdowns to appear but the "Area" one is not working. Sorry, I tried rearranging the code but nothing worked. Thanks again for helping out a newbie. REMOVED
change to:
Have you changed how the
select
was being constructed? It was populating the list of options before, bit it is empty now.Allan
Hi, Allan. Yes, but I have reverted it back so options show in the area dropdown. Earlier I tried adding the first piece of code you gave me, but I was not sure where to place it.
Use my earlier code to perform the search action, but use something like:
To get the data to show in the dropdown. Lol inner that and add each entry in the array as a value. You may want to add
.sort()
to that function chain as well thinking about it.Allan
Good morning. Thank you for your help. Is it possible to hire a Datatables developer to fix our directory, or do I need to buy a one-year subscription?
I don't provide development as a service, but rather support (I recognise the line can be a bit blurred, particularly for small things like this).
Aside from the area filter, what else do you need done?
I've just had a look at the page you linked to before and it is still using a regex filter on the area. I think your
// Build single list of options from the Area columns
is absolutely right. You just need to integrate my suggestion from above with a fixed filter:Allan
Thanks so much for all your help! I almost have it done. Are you able to delete this post and my account?
Yes of course. Would you like me to do so? Others might benefit from it if you are willing to let the post remain? (I can remove the URLs). No worries if you want it fully deleted though.
Allan
Yes, that will be great! Thank you!
All done![:) :)](https://datatables.net/forums/resources/emoji/smile.png)