Column Search (Select Inputs) doesn't work with scrollX: true

Mert1296

Hi Everyone,

I have an issue with my column search via select Inputs. When I enable scrollX, my search fields are under my Header. but I really don't know why. can you guys help me out?
Here is a test case: http://live.datatables.net/ruyezofa/4/edit
Cheeres,
Mert

colin

Hi @Mert1296 ,

You need to place those dropdowns with table().header() - this thread has the same issue and the fix is at the end.

Cheers,

Colin

Mert1296

Hi @Colin ,

Thanks for your help! I tried it but it didn't work.. Can you help me out please?

Cheeres,

Mert

Mert1296

So I tried to code an own function for the select Inputs. The issue here is, that the select fields are cut off from the tbody. When I set the overflow Y of my header to visible, I can scroll in my thead to see my values in the option fields but I want it without the Scrolling in my thead..
here is my function:

function setSearchFields() {
                    var title = "";
                    $('#table thead th').each(function () {
                        if ($(this).hasClass('noSearch')) {
                        }
                        else {
                            if ($(this).hasClass('ct')) {
                                title = $(this).text();
                                $(this).html('<select name="ct-search" multiple="multiple" class="searchField"><option>Decision</option><option>Evaluation</option><option>Implementation</option><option>Initiation</option></select>' + title);
                            }
                            else if ($(this).hasClass('status')) {
                                title = $(this).text();
                                $(this).html('<select name="st-search" multiple="multiple" class="searchField"><option value="Decided">Decided</option><option value="Completed">Completed</option><option value="Approved">Approved</option><option value="Draft">Draft</option><option value="Rejected">Rejected</option><option value="Cancelled">Cancelled</option><option value="In Cancellation">In Cancellation</option><option value="In Progress">In Progress</option></select>' + title);
                            }
                            else if ($(this).hasClass('ft')) {
                                title = $(this).text();
                                $(this).html('<select name="ft-search" multiple="multiple" class="searchField"><option value="Yes">Yes</option><option value="No">No</option></select>' + title);
                            }
                            else if ($(this).hasClass('lmt')){
                                title = $(this).text();
                                $(this).html('<select name="lmt-search"  multiple="multiple" class="searchField">' +
                                <?php
                                    $lmt = array_unique($lmt);
                                    foreach ($lmt as $value) {
                                ?>
                                    '<option><?php echo $value ?></option>\n' +
                                <?php } ?>
                                    '</select>'+title);
                            }
                            else if ($(this).hasClass('gft')){
                                title = $(this).text();
                                $(this).html('<select style="width:250px !important;" name="gft-search" multiple="multiple" class="searchField">\n' +
                                <?php
                                    $gft = array_unique($gft);
                                    foreach ($gft as $value) {
                                ?>
                                    '<option><?php echo $value; ?></option>\n' +
                                <?php } ?>
                                    '</select><hr>'+title);
                            }
                            else {
                                title = $(this).text();
                                $(this).html('<input class="searchField form-control glyphicon" type="text" placeholder="&#xe003" />' + title);
                            }
                        }
                    });
                }

Mert1296

I don't know why but I can't Highlight the code sorry for that

colin

Hi @Mert1296 ,

For code highlighting you need a tripe quote - I modified that above.

I took your last example and got it working, see here. Hope that all does the trick on your live system, shout if not,

Cheers,

Colin

Mert1296

Hi Colin, thanks for your help!

I made it a Little bit different but this one works too and without a 2nd Header: http://live.datatables.net/ruyezofa/12/edit

Now what I have to do is to make the select boxes multiple (that I can click on more than one Options). But I can't find something in the forums.. do you now how it works?

Cheeres,
Mert

kthorngren

The problem with having the drop down in a single header is clicking it could cause that column to also sort.

See if this thread helps for multi-select:
https://datatables.net/forums/discussion/49676/multi-select-columns#latest

Kevin

colin

Hi @Mert1296 ,

In my last example, that had two selects - so you could copy that code across. It just needs the class on the column header.

By the way, it is best to have the second header, otherwise clicking on the select will change the ordering.

Cheers,

Colin

Mert1296

Yes I tried it with the select2 plugin but it didn't work.. maybe bc I'm trying to put the select boxes into my Header?

kthorngren

Yes I tried it with the select2 plugin but it didn't work

What happened?

Kevin

Mert1296

Just nothing. can't even see my table..

Cheeres,
Mert

Mert1296

But in the test case it works: http://live.datatables.net/ruyezofa/13/edit

kthorngren

Just nothing. can't even see my table..

Look for errors in your browser's console.

Kevin

Mert1296

Look for errors in your browser's console.

"The object does not support the "multipleSelect" property or method."

But I think thats an other plugin

Mert1296

So with my function with the multiSelect-PlugIn above it works with the multiselection. but like I said: the dropdown-menu is cut off and I have to set the OverflowY of my thead to visible. Problem here is that I have to scroll my thead for seeing all values in my Dropdown list

kthorngren

I changed my example to move the select2 search input from the footer to the 2nd header. Sith scrollX: true it seems to work fine.
http://live.datatables.net/liheluka/1/edit

I guess the next step is to provide a test case showing your issues so we can help.

Kevin

Mert1296

Okay, thank you for your help!

When I'm using my Website, I can't see my table when I'm using the select2 PlugIn but when I copy my whole DataTable into the test case with using the select2 it works.
I really don't know why.. The console also doesn't show me Errors

Mert

kthorngren

Its probably a CSS conflict. Are you using a styling Framework? If so I would start there and add that to your test case. Then keep adding components from your webpage to the test case until you find the conflict.

Kevin

Mert1296

Yes I'm using Bootstrap 3 - only Bootstrap but when I'm removing the CSS file I have the same issue..

Mert1296

And now my console shows me this error: "Syntax error, unrecognized expression: #"

kthorngren

Not sure what is causing the syntax error. I updated my example to use Bootstrap 3.
http://live.datatables.net/liheluka/4/edit

Still seems to work correctly. Do you have other Datatables extensions like FixedColumns or FixedHeader?

Kevin

Mert1296

I have Buttons, select, colReorder, colVis.

kthorngren

Again my suggestion would be to update my example with what you have to try replicating the issue. This way when you replicate the problem you have a test case for us to look at.

Are you putting your search inputs in the second header like my examples?

Kevin

Mert1296

Okay here is a testcase with all imports and my datatables without the columndefs:
http://live.datatables.net/liheluka/5/edit

kthorngren

The test case wasn't running. Found this error in the browser's console:

Uncaught Unknown button type: selectAll

Commented out those lines then this error:

Uncaught Cannot extend unknown button type: colvis

Noticed you had a typo with this:

oderCellsTop:true,

I noticed this error when leaving the select2 input. Doesn't seem to cause any issues. I tried it with my BS example and it does the same until I remove scrollX. Removing scrollX from your example doesn't alleviate the error.

Uncaught TypeError: Cannot read property 'select2' of undefined

Looks like the select2 inputs are working. Are they for you?

Can you post a link to your page so we can see the problem?

Kevin