Как разделить значение внутри <td>, используя Datatables

Question

У меня есть HTML-таблица, которая выглядит следующим образом.

<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>

Третий столбец может содержать несколько значений, разделенных <br>.

HTML генерируется внутри цикла foreach PHP.

Я использую плагин JQuery Datatables для создания интерактивной таблицы с выпадающим фильтром для последнего столбца.

Это мой код для этого:

initComplete: function () {
        this.api().columns([2]).every( function () {
            var column = this;
            var select = $('<select><option selected="true" disabled="disabled">Filter by country</option></select>')
                .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) {
                    di = d.replace("<br>", "");
                    select.append('<option value="' + di + '">' + di + '</option>')
                }
            } );
        } );
    }

Все работает нормально, если третий столбец не содержит нескольких значений, но если третий столбец содержит несколько значений, значения объединяются в раскрывающемся списке и не могут фильтроваться по этим / этим значениям.

<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>

Какие-нибудь предложения о том, как преодолеть эту проблему?

Answer 1

Попробуйте изменить этот код:

            column.data().unique().sort().each( function ( d, j ) {
                if(d.length) {
                    di = d.replace("<br>", "");
                    select.append('<option value="' + di + '">' + di + '</option>')
                }
            } );

для этого кода:

        column.data().unique().sort().each( function ( di, j ) {
            if(di.length) {
                let separator = '\n';
                if(di.text().indexOf(separator)==-1){
                    select.append('<option value="' + di + '">' + di + '</option>');
                } else {
                    let arrValues = di.text().split(separator);
                    for(let ix=0;ix<arrValues.length;ix++){
                        select.append('<option value="' + arrValues[ix] + '">' + arrValues[ix] + '</option>'); 
                    }
                }
            }
        } );

Переменная "d" неправильно указана как "di" и EDIT: вы должны определить разделитель,Я исправил код.