Search with comma

nunziorash

Hello everybody, I know it is a problem already dealt with but I cannot find a solution.
A column has comma separated values, but with select I created I can't filter the results.
What am I doing wrong? Can you please help me?

This is my td:
<td>Value 1, Value 2 / Value2, Value 3 / Value 3, Value 4</td>

This is my js:

initComplete: function() {
                    var ValoriUnici = [];
                    this.api().columns([1, 2, 3, 4, 5, 6, 7, 8, 9]).every(function() {
                        var column = this;
                        var nomeColonna = column.header().textContent;
                        var select = $(
                                '<select class="form-control"><option value="">- Filtra per ' +
                                nomeColonna + ' -</option></select>')
                            //.appendTo($(column.footer()).empty())
                            .appendTo($('.divFiltri'))
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false, true)
                                    .draw();
                            });


                        column.data().unique().sort().each(function(d, j) {
                            var d = d.replace('<span class="badge badge-si">',"");
                            d = d.replace('<span class="badge badge-no">',"");
                            d = d.replace('</span>',"");
                            //splitto le eventuali virgole separatrici e controllo se i valori sono unici all'interno dell'array, se così è li stampo
                            $.each(d.split(', '), function(key, value) {
                                if (ValoriUnici.indexOf(value) == -1) {
                                select.append('<option value="' + d + '">' + (value == '-1' ? 'select' : value) + '</option>');
                                ValoriUnici.push(value);
                                }
                            });
                           //select.append('<option value="' + d + '">' + d +'</option>');
                        });
                        select.wrap($(
                            '<div class="col-lg-2 contenitore-filtro-datatable mb-10">'
                        ));
                    });
                },

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

I suspect the problem is with the column search term. You have:

column
.search(val ? '^' + val + '$' : '', true, false, true)
.draw();

Its a regex pattern that looks like this ^mySelectVal$. This says the first letter in the td is a m and the last is l. But you want to search something like val1, val2, val3. This regex pattern won't work. You can try removing the ^ and $ but that might not provide the result you want. Maybe you will want something like this:

column
.search(val ? '\b' + val + '\b' : '', true, false, true)
.draw();

the \b is a word boundary. You will need to adjust the regex pattern to match your needs. If you need help with this then provide a test case with an example of your data and your initComplete code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

nunziorash

Thank you for your reply.
The problem is here: .search(val ? '\b' + val + '\b' : '', true, false, true)
But I just don't know how to change it, could you please help me?

I have entered a part of my table and my JS here: http://live.datatables.net/dezixova/1/edit?html,css,js,console,output

thanks thanks thanks

colin

Thanks for the test case, but can you give steps on how to reproduce please - I tried filtering on "Filtra per Zona Preferenza", and it appeared to behave as expected,

Colin

nunziorash

Thanks for the reply.
The problem is that not all results appear when filtered.
eg. if i select "Via Bari / Via Santeramo", only one result appears, instead, they contain 4 records "Via Bari / Via Santeramo".
That's the problem, it doesn't filter correctly. I hope I have explained the problem well

kthorngren

One problem is you are building the select like this:

select.append('<option value="' + d + '">' + (value == '-1' ? 'select' : value) + '</option>');

The value, which you are getting via $(this).val() is the full data not the split data.

The second problem is with the ^and $. With this the cell can only have Via Bari / Via Santeramo. I removed those tokens and changed the value="' + d + '" to value="' + value + '":
http://live.datatables.net/dezixova/2/edit

It works better. You may or may not need to make the regex pattern more specific. Use https://regex101.com/ to work out the correct regex pattern make sure all your option values work.

Kevin

nunziorash

Thanks Thanks Thanks!
**It seems to work! **

How could I optimize in your opinion through regex? Just as a tip, it seems to work well already.

Thanks again.