Displaying search field

[w3q]

Hello everyone. Im new to omines/datatables-bundle and I have problem displaying search.

I was studying your documentation and was not able to get it working. Ive created a table like this

$table = $dataTable->create()
          ->add('street', TextColumn::class, ["label" => "Street", "searchable" => true, "globalSearchable" => true])
          ->add('houseNumber', TextColumn::class, ["label" => "House number", "searchable" => true])
          ->add('postal', TextColumn::class, ["label" => "Postal Code", "searchable" => true])
          ->add('city', TextColumn::class, ["label" => "City", "searchable" => true])
          ->add('country', TextColumn::class, ["label" => "Country", "searchable" => true])
          ->createAdapter(ORMAdapter::class, [
            'entity' => CustomAddress::class,
          ])
          ->handleRequest($request);

        if ($table->isCallback()) {
            return $table->getResponse();
        }

        return $this->render('sales_request/add_custom_address.html.twig', ['datatable' => $table]);

Also, in my twig template

<div id="addresses">Loading...</div>
    <script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>
    <script>
        $(function() {
            $('#addresses').initDataTables({{ datatable_settings(datatable) }}, { searching: true });
        });
    </script>

The datatable works fine, sorting is working etc, but I dont see the search input field.How should I configure it to display it?

[curry684]

Mmm that code looks like it should work, but it's been a year since I used or tested this hehe. We'll have to dive into this, not sure about a quick fix now.

[citadev]

Hello, I've just tried this bundle today, it works fine but searching is not fully functional (see #2 and #22 ). So searchable parameter will have no effect in your columns definition as it is supposed to enable per column search.

But searching: true in initDataTables should display the global search input. Is it the case ? Which version of DataTables (client side lib) are you using ?

[kaistaerk]

same problem at my code. I tried the same html/js code like thread opener. Iam using the neweset Datatables version including bootstrap3 support

[ardentsword]

I found the problem, it is caused by the value for the dom under options in the default datatables.yaml file (https://datatables.net/reference/option/dom). It requires the f option to display the filter/search bar somewhere. If can either be fixed by commenting out the line or adding for example <'row' <'col-sm-12 text-right' f>> at the front for a complete value of: dom: "<'row' <'col-sm-12 text-right' f>><'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>>"

I would suggest making the above line the default value in the future. If you would like me to I would gladly make a pull request for it.

Edit: This technically isn't caused by this repository, but by the Symfony Flex recipe (https://github.com/symfony/recipes-contrib/tree/master/omines/datatables-bundle/0.1). Also explains why it only recently popped up.

[curry684]

As I wrote that recipe I'm pretty sure I did this on purpose, just not entirely sure my purpose was well founded. What does the f value do if searching is disabled?

[ardentsword]

It simply doesn't show the search box, I'm not sure about the div's it creates though, might hide those too, I will be able to check this next week.

[curry684]

Ok let me know. If it does create the stray div I'd prefer sticking to my original approach, being that the recipe contains a "sane common default" for the specific purpose of being easily editable for changes like this. We'd have to document it better though, no contest there (I also forgot when this issue first arose).

[ardentsword]

Unfortunately, it does create a stray div (or rather, 2, in my example) but due to the nature of divs ( or bootstrap?) they collapse to 1px height.

After a bit more experimenting, I found that putting it in front of the tr: <'row' <'col-sm-12' ftr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>> Gives the same visual result (aligned to the right) and leaves no trace if it is disabled. You could consider that option as well.

Also, I found the following quote in the datatables docs:

Note, I am aware that this is the most complex option in DataTables and it takes a fair amount of understanding, particularly when using the styling integration options! The plan is to revamp this option in 1.11 to make it easier to use.

So it's probably gonna be changed soon too, just for a heads up.

[curry684]

Mmm yes so it does boil down to that it has a sane default now and that the best "solution" is just better documentation.

[ArnaudC]

Still not working on the last version.

[curry684]

Please read the entire discussion, then try to elaborate enough so others have a chance of understanding what you are trying to convey.

[ArnaudC]

The global search now working. I had to modify these 2 files :

In /symfony/config/packages/datatables.yaml, replace with <'col-sm-12' ftr> : datatables: dom: "<'row' <'col-sm-12' ftr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>>"

In the Js file, add { searching: true,} : table.initDataTables({{ datatable_settings(datatable) }}, { searching: true,});

However, I can't use the column-level searches.

In /symfony/src/Form/DataTable/DataTableUserType.php, I have 'searchable' => true. The expected behavior is to have a filter only for the searchable columns. $table ->add('username', TextColumn::class, ['label' => 'user.username', 'orderable' => true, 'searchable' => true, 'globalSearchable' => true, ])

[curry684]

@shades684 did we ever properly implement column level searches?

[jmontoyaa]

The solution of @ArnaudC works, I can see the search input and searching works.

[shades684]

@curry684 No we didn't. There are several other issues, but they all boil down to issue #2

[curry684]

Good point, then let's close this as a duplicate of that.