Smart searching doesn't work

yinyang

Hi,

My smart searching doesn't work. If I type "Lyon" it find "Lyon", but if I type "Ly" it doesn't find "Lyon" in my city name column.

However, smart searching is supposed to be activated, since by default it is on true.

There is my code :

$("#filter_search input").on('keyup change', function(e) {

    if (e.keyCode == 13) {
        api
            .column($(this).parent().index()+':visible')
            .search(this.value)
            .draw();
    }
});

Thank you.

kthorngren

Smart searching is working in this example:
http://live.datatables.net/powuciki/1/edit

Please provide a link to your page or a test case replicating the issue so we can help debug.

Kevin

yinyang

Hi,

Here is a test link :

http://flanerbouger.studiolab.fr/test/cities

kthorngren

You have serverSide: true, which menas your server script is responsible for the search. When searching the SSP process, as documented here, will send the search terms to the server. For example when searching "me" in the Department column:

columns[6][data]: department
columns[6][name]: 
columns[6][searchable]: true
columns[6][orderable]: false
columns[6][search][value]: me
columns[6][search][regex]: false

Your server script will need to perform the "Smart" search. Are you using a Datatables provide server script or your own?

Kevin

yinyang

I use the Symfony Datatable Bundle from Omines, it manages everything:

return $this->dataTableFactory->create()
    ->add('id', TextColumn::class, ['label' => 'ID', 'field' => 'c.id'])
    ->add('code', TextColumn::class, ['label' => 'Code Insee', 'field' => 'c.code'])
    ->add('zipCode', TextColumn::class, ['label' => 'Code Postal', 'field' => 'c.zipCode'])
    ->add('realName', TextColumn::class, ['label' => 'Nom', 'field' => 'c.realName'])
    ->add('latitude', TextColumn::class, ['label' => 'Latitude', 'field' => 'c.latitude'])
    ->add('longitude', TextColumn::class, ['label' => 'Longitude', 'field' => 'c.longitude'])
    ->add('department', TextColumn::class, ['label' => 'Département', 'field' => 'd.name'])
    ->add('actions', TextColumn::class, ['label' => 'Actions', 'className' => 'actions', 'render' => function($value, $context) {
        $pathEdit = $this->router->generate('admin_edit_city', ['id' => $context->getId()]);
        return sprintf(
            '<a class="d-contents mr-2" href="%s"><i class="ion-edit mr-2"></i></a>', 
            $pathEdit,
        );
    }])
    ->createAdapter(ORMAdapter::class, [
        'entity' => City::class,
        'query' => function (QueryBuilder $builder) {
            $builder
                ->select('c')     
                ->addSelect('d')   
                ->from(City::class, 'c')
                ->join('c.department', 'd')
                ->orderBy('c.realName', 'ASC')
            ;
        },
    ])
    ->handleRequest($this->requestStack->getCurrentRequest())
;

This script above generates the datatable;

And my js full script:

<script>
    $('#cities').initDataTables({{ datatable_settings(datatable) }}, { 
        processing: true,
        serverSide: true,
        searching: true, 
        ordering: false,
        searchDelay: 200,
        dom: 'Bfrtip',
        buttons: [
            {
                text: 'Réinitialiser',
                action: function (e, dt, node, config) {
                    location.reload();
                }
            }
        ],
        initComplete: function(settings, json) {
            var api = this.api();

            // Get number of total records
            var recordsTotal = api.context[0].fnRecordsTotal();
            $('#cities_list h5 span').text(recordsTotal);

            // Create tr filter
            var tr = $('<tr id="filter_search"></tr>');
            // Count number of cells in a row
            var nbCells = document.getElementById('dt').rows[0].cells.length;
            // Generate cells to #filter_search row 
            for (var i = 0; i < nbCells; i++) {
                if (i == 4 || i == 5 || i == 7) {
                    tr.append('<th></th>');
                } else {
                    tr.append('<th><input type="search" onclick="stopPropagation(event);" placeholder="Rechercher"></th>');
                }
            }

            var firstHeaderRow = $('tr', api.table().header());
            tr.insertAfter(firstHeaderRow);

            $("#filter_search input").on('keyup change', function(e) {
                if (e.keyCode == 13) {
                    api
                        .column($(this).parent().index()+':visible')
                        .search(this.value)
                        .draw();
                }
            });
        },
        drawCallback: function(settings) {
            var api = this.api();
            var info = api.page.info();
            var recordsDisplay = info.recordsDisplay;
            $('#cities_list h5 span').text(recordsDisplay);
        },
        language: {
            emptyTable:     "Aucune donnée disponible",
            info:           "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
            infoEmpty:      "Affichage de 0 à 0 sur 0 entrées",
            infoFiltered:   "(filtré de _MAX_ entrées au total)",
            lengthMenu:     "Affichage de _MENU_ entrées",
            loadingRecords: "Chargement...",
            processing:     "En traitement...",
            search:         "Recherche : ",
            searchPlaceholder: "Chercher un id, un titre, une ville, ...",
            zeroRecords:    "Aucun enregistrements correspondants trouvés",
            paginate: {
                first:      "Premier",
                last:       "Dernier",
                next:       "Suivant",
                previous:   "Précédent"
            },
        }
    });

    function stopPropagation(evt) {
        if (evt.stopPropagation !== undefined) {
            evt.stopPropagation();
        } else {
            evt.cancelBubble = true;
        }
    }
</script>        

kthorngren

I use the Symfony Datatable Bundle from Omines

This is not something Datatables provides. You will need to contact their support to find out what to do or if they support something similar to "Smart" searching.

Kevin

yinyang

Ok, if not if I turn off the server side it might work?

kthorngren

The Smart search capability is a client side process. Yes, if you turn off server side processing it should work. But I'm not sure how the server script you are using works. I would expect it to return all the rows. But its hard to say what its behavior will be if it doesn't see the server side parameters.

Kevin

yinyang

By removing the server side it doesn't work either ... All I have to do is contact the bundle support!

kthorngren

By removing the server side it doesn't work either

Your example still has serverSide: true. If you want us to take a look please remove or comment out this line. This is assuming that the problem is with the search and not loading the data.

Kevin

yinyang

I deleted the line from the server side : https://127.0.0.1:8000/test/cities

kthorngren

That is local to your network only. We can't reach it. For us to look you will need to remove it form http://flanerbouger.studiolab.fr/test/cities .

Kevin

yinyang

it's good I made the modification on the server

yinyang

Can someone help me ?

http://flanerbouger.studiolab.fr/test/cities

kthorngren

I don't know anything about the Symfony Datatable Bundle from Omines but it is still using server side processing even though you removed the serverSide: true option. You can see the XHR requests and responses using the browser's network inspector. The initial response is with only 50 rows and each search is fetching from the server.

You will need to work with their support to find the best solution for your search requirements. Maybe they can tell you how to disable server side processing or add the Smart Search capability you want.

Kevin