Фильтр jquery datatable rows

Question

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

https://jsfiddle.net/mleitao/twg0qqq2/

$(document).ready(function() { 
$('#camera').click(function() { 
    $("#table-ActiveRooms tr td").each(function() { 
     var cell = $(this) 
     if (cell.children().length == 0) { 
      $(this).parent().hide(); 
     } 
    }); 
}); 

$('#btnReset').click(function() { 
    $("#table-ActiveRooms tr").each(function() { 
     $(this).show(); 
    }); 
}); 

}); 

Answer 1

Вы должны выбрать конкретно в td, соответствующий выбранному фильтру для его работы. В вашем коде вы спрячете tr, когда любой из td в строке пуст.

Вы можете добавить класс, чтобы идентифицировать этот тд, как Шс этой скрипки: https://jsfiddle.net/ttk2dy3f/2/

редактировать: жаль, что я забыл, чтобы спасти скрипку, сделать сейчас

Answer 2

Это фильтр, основанный на падении вниз, вы можете применить его к своему коду. data [1] - это столбец, который вы хотите фильтровать.

var employeeName = ''; 

     $.fn.dataTable.ext.search.push(
     function (settings, data, dataIndex) { 
      if (data[1].indexOf(employeeName) > -1) { 
       return true; 
      } 
      else { 
       return false; 
      } 
     } 
    ); 



    $(document).ready(function() { 
     $('#employeeSelection').change(function (event) { 
         employeeName = $('#employeeSelection').val(); 

         table.draw(); 
        }); 

var table = $('#mainGrid').DataTable({ 
       paging: false, 
       ordering: true, 
       aaSorting: [], 
       scrollX: true, 
       searching: true, 
       dom: 'Bfrtip', 
       buttons: [ 
        'print' 
       ] 
      }); 

     }); 

Answer 3

Некоторые из предложений, которые вы получаете, чрезмерно сложны. Вам не нужно использовать .each, а также не нужно if операторов для проверки пустых значений.

Редактирование ваших селекторов будет более конкретным, ваш код может быть намного чище и эффективнее, без использования одного each или if.

Смотрите здесь: https://jsfiddle.net/twg0qqq2/44/

$(document).ready(function() { 

    $tableRows = $("#table-ActiveRooms tr"); 

    $('#camera').click(function() { 
     $tableRows.has("td:nth-child(2):empty").hide(); 
    }); 

    $('#monitor').click(function() { 
     $tableRows.has("td:nth-child(3):empty").hide(); 
    }); 

    $('#phone').click(function() { 
     $tableRows.has("td:nth-child(4):empty").hide(); 
    }); 

    $('#btnReset').click(function() { 
     $tableRows.show(); 
    }); 
}); 

2-в nth-child(2) представляет собой столбец 2. Как вы можете предположить, мы просто изменить это число, чтобы соответствовать для monitor и phone.