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

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

Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    Hi @Colin ,

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

    Cheeres,

    Mert

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0
    edited November 2018

    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);
                                }
                            }
                        });
                    }
    
    
  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    What happened?

    Kevin

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

    Cheeres,
    Mert

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Look for errors in your browser's console.

    Kevin

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0
    edited November 2018

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0
    edited November 2018

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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

    I have Buttons, select, colReorder, colVis.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Mert1296Mert1296 Posts: 43Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

This discussion has been closed.