datatables-bundle: Filter column not displayed

Hello, maybe I didn’t search docs deeply, but I am not able to get column filter displayed. I have this setup.

Controller:

 $userFilter = new ChoiceFilter();
        $userFilter->set([
            'choices' => ['foo' => 'bar', 'bar' => 'baz']
        ]);
        $table = $dataTableFactory->create()
        ->add('created_at', DateTimeColumn::class, ['label' => 'Datum', 'format' => 'j.n.Y H:i', "searchable" => false])
        ->add('userName', TextColumn::class, [
            'label' => 'Uživatel',
            "searchable" => true,
            'render' => function ($value, $context) {
                $user = $context->getUser();

                return $user ? $user->getFirstname().' '.$user->getLastname() : '';
            },
            'filter' => $userFilter
        ])->createAdapter(ORMAdapter::class, [
                'entity' => Copy::class,
            ])
            `->handleRequest($request);

datatables.yaml

# Latest documentation available at https://omines.github.io/datatables-bundle/#configuration
datatables:
    # Set options, as documented at https://datatables.net/reference/option/
    options:
        lengthMenu : [10, 25, 50, 100, 250, 500, 1000, 2500]
        pageLength: 50
        dom: "<'row' <'col-sm-12' ftr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>>"
        searching: true

    template_parameters:
        # Example classes to integrate nicely with Bootstrap 3.x
        className: 'table table-striped table-bordered table-hover data-table'
        columnFilter: "both"

    # You can for example override this to "tables" to keep the translation domains separated nicely
    translation_domain: 'messages'

I am not able to see column filter. What is wrong? Setup or datatable template. Thanks for reply.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 7
Comments: 28 (6 by maintainers)

Most upvoted comments

I’m also experiencing this problem and as mentioned above there is no documentation about how to implement this properly.

Can anyone explain how this should be implemented - is there additional javascript required to get it working?

Thanks!

mash-potato47 on Nov 20, 2020

Same here.

Gerben321 on Feb 1, 2021

I have it working now, but it required quite a bit of rework with some features/options copied over from the global search changes made - and it doesn’t support multiple filters on a single column (yet)

And the js initComplete is still the way to “hook up” the inputs/selects which is not fabulous

auroraeosrose on Feb 2, 2024

So I’ve dug into the code here - this is not a small fix as it’s been broken for a LONG time and never been forward ported In between the breakage there are PHP 8.x fixes that have to happen, symfony fixes that have to happen, twig fixes that have to happen…

But I need it for work so - meh

apparently there was an issue with the twig templates from quite a long time ago when settings/options for the base datatables class were refactored. As a “fix” the part that generated the input/js for doing the searching was just … commented out I updated the twig templates, uncommented the lines, fixed some calls, added a constructor to the filter abstract class (seriously ick I shouldn’t have to call set to use a filter without a PHP error… ) but I’m still banging up against the JS side

I’m working on a fix (and warning I’m on Symfony 7 at this point) on a fork at this point

auroraeosrose on Dec 14, 2023

Here is the repo, https://github.com/Shotman/datatable-repo, not the pretiest readme or anything but does the job to recreate what I did on my personal project

EDIT : and from what I’ve seen like just now, it’s likely to be vulnerable to SQL injections with a good enough crafted filter so yeah do not use in production ^^’

Shotman on Jul 28, 2023

I managed to have column filtering on a project of mine, for now it’s still early (like 30sec ago) later, most likely next week, I’ll create a minimal reproduction repo and link it here, no idea if it’s the bundle’s intend way but if it works it works.

To sum it up for people who want to try I added this to the initComplete config inside my twig template

                initComplete: function () {
                let api = this.api();

                api.columns().every(function () {
                    let column = this;
                    let title = column.header().textContent;
                    let th = column.header();

                    // Create input element
                    let input = document.createElement('input');
                    input.classList.add('form-control');
                    input.addEventListener("click", function(e) {
                        e.stopPropagation();
                    });
                    input.placeholder = title;
                    th.replaceChildren(input);

                    // Event listener for user input
                    let debouncedFunction = debounce(() => {
                        if (column.search() !== this.value) {
                            let idx = [...th.parentNode.children].indexOf(th);
                            let val = input.value;
                            if(val.length < 3) return;
                            api.column(idx + ':visible')
                                .search(val ? '%'+val+'%' : '')
                                .draw();
                        }
                    },500)
                    input.addEventListener('keyup', debouncedFunction);
                });
            }

and to my column I added those options : ["searchable" => true, "filter" => $nameFilter, "operator" => "LIKE"] and $nameFilter is just a TextFilter on wich I called to set method and put “operator” => “LIKE” as well

And this adds a text input to each column that perfoms a like operation in the backend

Shotman on Jul 11, 2023

Given all the comments above I’d recommend considering this specific feature ‘broken’.

We use the library a lot at our company, so we do the maintenance, but only on core features that we developed ourselves and use. It would appear this contributed feature wasn’t implemented well unfortunately, nor documented, so we’ll likely remove it during an upcoming maintenance round.

curry684 on Jul 3, 2023

I neither wrote nor use nor reviewed this feature: #120

Not much I can do to help with an issue I don’t really fully understand myself. I’m keeping it open so other people can help each other, that’s how open source works.

I didn’t mean it personal 😃 Just read it and it sounds a bit harsh, didn’t mean it like that 😉

I have no clue on how to fix it either, otherwise I would have opened a PR :+)

RobQuistNL on Nov 23, 2022

There, now it has a label showing I also have no clue about how to solve this issue.

curry684 on Nov 22, 2022

Hi everybody! Did anyone come up with something with that filter? The author ignores our questions and no documentation. @MadCat34 @kapcus @Gerben321 @FigaCZ @mash-potato47

ducho on Apr 19, 2022