jqueryのデータテーブルの行をフィルタリングする

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を選択する必要があります。あなたのコードでは、tdのいずれかが空のときにtrを非表示にします。

あなたはIHのように、このバイオリンをこれらの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を1つ使用せずに、コードをもっとクリーンで効率的にすることができます。

はこちらをご覧ください：nth-child(2)で2列2を表し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(); 
    }); 
}); 

あなたが引き受けることができるように、我々は単にmonitorとphoneのために一致させるために、この番号を変更します。