Как разделить значения внутри фильтра столбцов с помощью таблиц данных

У меня есть таблица данных, и в этой таблице в конкретной ячейке столбца есть списки из нескольких значений, разделенных запятой, по умолчанию все списки ячеек используются в одном параметре фильтра. Но я хочу, чтобы список значений ячейки был разделен на отдельные параметры фильтров.

У меня есть datatable, который выглядит так.

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

Третий столбец может содержать несколько значений, разделенных запятой(,).

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

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

initComplete: function () {
        this.api().columns(3).every( function () {
            var column = this;
            var select = $('<select class="form-control"><option value="">Select All</option></select>')
            .appendTo( $('#language').empty().append('<label>Filter by Language:</label>') )
                .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 ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

Я нашел эту статью и использую ниже код. Он создает фильтр внутри оболочки таблицы, но я хочу, чтобы он был вне таблицы. вот скриншот моего живого datatable введите здесь описание изображения

        <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                $('#myDatatable').dataTable( {
                    "sDom": 'W<"clear">lfrtip',
                    "oColumnFilterWidgets": {
                        "aiExclude": [ 0,1 ],
                        "sSeparator": ','
                    }
                } );
            } );
        </script>

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


person Yajuvendra pratap singh    schedule 23.11.2020    source источник
comment
Привет, можешь создать рабочий демо-код?   -  person Swati    schedule 23.11.2020
comment
Привет @Swati, Вот рабочая демонстрационная ссылка https://jsfiddle.net/yajuvendra1990/m8bdcswg/16/   -  person Yajuvendra pratap singh    schedule 23.11.2020
comment
Я проверил ваш код, если вы удалите всю эту this.api().columns(4).every( function () {..}) часть из этой скрипки, тогда будет отображаться только последнее раскрывающееся меню. Попробуйте и посмотрите один раз.   -  person Swati    schedule 24.11.2020
comment
Спасибо за ответ, я думаю, вы не поняли моего беспокойства. Я хочу, чтобы значение второго раскрывающегося списка выглядело как значение третьего раскрывающегося списка. ИЛИ 3-й раскрывающийся список должен быть добавлен в <span id="language"></span>   -  person Yajuvendra pratap singh    schedule 24.11.2020


Ответы (1)


Рабочая демонстрация ссылка

this.api().columns(4).every( function () {
    var column = this;
    var select = $('<select class="form-control"><option value="">Select All</option></select>')
    .appendTo( $('#language').empty().append('<label>Filter by Language:</label>') )
    .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
        );

        column
            .search( this.value )
            .draw();
    } );
    column.data().unique().sort().each( function( d, j ) {      
       var nameArr = d.split(",");
        nameArr.forEach(function(number) {                
            var optionExists = ($("#language option[value='"+number+"']").length > 0);
            if(!optionExists){
                select.append( '<option value="'+number+'">'+number+'</option>' );
            }                    
        });                     
       
    } );           
    
} );
person Yajuvendra pratap singh    schedule 24.11.2020