チェックボックスを変更した後、クラス「hidden」の行を隠す

Question

私はjQuery datatablesを使用しています。すべての行をclass="hidden"で非表示にしたいと思います。

このコード：

var table = $('#table1').DataTable(); 
table.rows('.hidden').hide(); 

それは（行が隠されていない）働いていない、と私は、コンソールでこのテキストを参照してください。

table.rows（...）を非表示ではありません関数

class="hidden"を使用してすべての行を非表示にするにはどうすればよいですか？

---

HTMLコード：

<tr class=""> 
    <td>1</td> 
    <td>ABC</td> 
    <td>17</td> 
</tr> 

<tr class="hidden"> 
    <td>2</td> 
    <td>DEF</td> 
    <td>22</td> 
</tr> 

<tr class=""> 
    <td>3</td> 
    <td>GHI</td> 
    <td>55</td> 
</tr> 

<tr class="hidden"> 
    <td>4</td> 
    <td>JKL</td> 
    <td>11</td> 
</tr> 
<input id="hideRows" name="hideRows" type="checkbox"> 

JSコード：

$('#table1').DataTable(); 

$('#hideRows').change(function() 
{ 
    var table = $('#table1').DataTable(); 
    $('tr.hidden').hide(); 
    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) { 
     if ($(oSettings.nTable).hasClass('hidden')) { 
      return aData[16] == '' || $('#hideRows').is(':checked'); 
     } else return true; 
    }); 
    table.draw(); 
}); 

Answer 1

次の解決策は、行がすでにhiddenクラスでマークされていることを前提としています。このように、フィルタ機能を実装して、行を非表示にするDataTableのフィルタリングを使用するには

：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
     return $(table.row(dataIndex).node()).hasClass('hidden'); 
    } 
); 

をそれはお勧めできませんが、あなたは行を非表示にするjQueryのを使用することができますが、落とし穴がある 。 （そこには、これを実行する必要があるかもしれない正当な理由があるが、彼らはここでは説明しません。）だけで、通常のjQueryのセレクタを使用してHTML tr要素のhiddenクラスを照会し、その後.hide()を適用し、このように：

$('tr.hidden').hide(); 

上記のjQueryメソッドを使用するか、またはhiddenクラスのCSSスタイリングを使用して、非フィルタ関数を使用して行を非表示にすると、副作用が発生する可能性があります。詳細については、jQuery DataTable - Hide rows the intended wayを参照してください。これらのいずれかの方法を使用した後、あなたがhiddenクラスを適用した後に再描画を強制する必要があること

$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) { 
    if ($(oSettings.nTable).hasClass('hidden')) { 
     return aData[16] == '' || $('#chkShowExcluded').is(':checked'); 
    } else return true; 
}); 

注意：あなたが/フィルタリングの問題を表示する場合は、DataTableのは、すでに隠されている行を知っている必要がありますテーブルの行には次のようになります。

table.draw();