Wsrtjtyk

I have a datatable with several columns.
One of them is id=event

To filter by "Event" I release a modal with a multiple select2 (id=event_filter) and by clicking on the Send button (id=filter-button) I launch the following code by javascript.

$(document).ready(function (e) {

let table = $('#datatable-table').DataTable();

$('#filter-button').click(function (e) {

    e.preventDefault();

    let str = $('#event_filter').find(':selected').map(function() {

        return $( this ).text();

    })

        .get()

        .join( "|" );

    if (str.length > 0){

        console.log(str);

        table

            .columns($('th#event'))

            .search(jQuery.fn.DataTable.ext.type.search.string(str),true,false  )

            .draw();

    } else {

        table

            .columns($('th#event'))

            .search("")

            .draw();

    }

  })

})

Among the select options are:

-Natal

-Pre Natal

-Post Natal

The problem is: When I select ONLY Natal, the console.log (str) returns Natal, but the table filters Natal, Pre Natal and Post Natal.

The behavior you must have is:

I select Natal => Only the rows with Natal appear

Select Natal and Pre Natal => appear only rows with Pre Natal and Natal

What am I doing wrong?

Finally I found the solution:

return '^'+$(this).text()+'$';