Пользовательский фильтр столбцов в таблице данных - PullRequest
Новая
       57

Пользовательский фильтр столбцов в таблице данных

0 голосов
/ 12 февраля 2020

У меня есть таблица данных с 15 столбцами. Я использую скрипт фильтра ниже, который показывает все значения в поле со списком. Это показывает комбобокс фильтр для всех столбцов. но на самом деле мне это не нужно. Я хочу это для 2,4,5,6,12 Столбцы. Я использую DataTables 1.10.16. 

$("#dTable tfoot th").each( function ( i ) {

        if ($(this).text() !== '') {
            var isStatusColumn = (($(this).text() == 'Status') ? true : false);
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(this).empty() )
                .on( 'change', function () {
                    var val = $(this).val();

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

            if (isStatusColumn) {
                var statusItems = [];


                table.column( i ).nodes().to$().each( function(d, j){
                    var thisStatus = $(j).attr("data-filter");
                    if($.inArray(thisStatus, statusItems) === -1) statusItems.push(thisStatus);
                } );

                statusItems.sort();

                $.each( statusItems, function(i, item){
                    select.append( '<option value="'+item+'">'+item+'</option>' );
                });

            }

            else {
                table.column( i ).data().unique().sort().each( function ( d, j ) {  
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );    
            }
      ```      


[![Actuall View of the table now][1]][1]


[![I want like this][2]][2]


  [1]: https://i.stack.imgur.com/gVZiR.png
  [2]: https://i.stack.imgur.com/fqGWI.png

1 Ответ

0 голосов
/ 12 февраля 2020

Вы можете добавить динамический c класс для каждого выбора, а затем просто отобразить: ни один с CSS. 

var select = $('<select class="' + i + '"><option value=""></option></select>')

затем ... 

.variableName1,
.variableName5,
.variableName6,
.variableName7,
.variableName8,
.variableName9 {
    display:none;
}
...