Split single cell values into multiples that searchable in select input

devilfish

I have a HTML table which look like this.

<table>
<tbody>
    <tr>
        <td>Alice</td>
        <td>England</td>
        <td>English<br>Swedish<br>French</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>Germany</td>
        <td>German</td>
    </tr>
</tbody>
</table>

Third column may contain multiple values, separated by <br> like in above example.

HTML is generated inside a PHP foreach loop.

I am trying to make third column searchable in select input.

This is my code for this:

initComplete: function () {
    this.api().columns([3]).every( function () {
        var column = this;
        var select = $('<select><option selected="true" disabled="disabled">Filter by country</option></select>');
        select.append( '<option value="">Show all</option>' )
            .appendTo( $(".dataTables_filter") )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );

                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            } );
        column.data().unique().sort().each( function ( d, j ) {
            if(d.length) {
                var val = $('<div/>').html(d).text();
                select.append( '<option value="' + val + '">' + val + '</option>' );
            }
        } );
    } );
}

All works fine if third column does not contain multiple values, but if third column contain multiple values the values are concatenated in the dropdown and it cant filter by that/those values each by themselves.

<select>
<option selected="true" disabled="disabled">Filter by country</option>
<option value="German">German</option>
<option value="English Swedish French">English Swedish French</option>
</select>

I somehow need to make a single <td> contain multiple values, split those into multiple and make them searchable each by them self (as they where in their own row) in the select input dropdown. The seperator can be anything. Just used <br> as example.

Any suggestions on how to solve this problem?

colin

Hi @devilfish ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin