jQuery DataTables：チェックボックスをクリックするとDOM行をフィルタリングする方法は？

私は質問のために簡単なテストケースを用意しました。jQuery DataTables：チェックボックスをクリックするとDOM行をフィルタリングする方法は？

ディスクに保存してブラウザで開くだけですぐに動作しますので、何もダウンロードしたりインストールしたりする必要はありません。ここで

は私のテストケースのためのスクリーンショットです：

screenshot

私の質問がされていますユーザーは果物および/またはキャンディーを選択したときにどのように私は、テーブル内の行をフィルタリングすることができますか？ここで呼び出す関数fnDraw（）は何ですか？

私のテストファイルindex.htmlを：

<html> 
<head> 
<style type="text/css" title="currentStyle"> 
     @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css"; 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/DataTables/DataTables/master/media/js/jquery.dataTables.js"></script> 
<script type="text/javascript"> 

$(function() { 
     var my_table = $('#my_table').dataTable({ 
      bJQueryUI: true, 
      aoColumns: [ 
       /* type */ { bVisible: false, bSearchable: false }, 
       /* thing */ null 
      ] 
     }); 

     $(':checkbox').click(function() { 
      alert('XXX what to do here? XXX'); 
     }); 
}); 

</script> 
</head> 
<body> 

<p>What should be shown:</p> 
<p><label><input type="checkbox" value="fruit">fruit</label></p> 
<p><label><input type="checkbox" value="candy">candy</label></p> 

<table id="my_table"> 
<thead> 
<tr> 
<th>Type</th> 
<th>Thing</th> 
</tr> 
</thead> 
<tbody> 
<tr><td>fruit</td><td>apple</td></tr> 
<tr><td>fruit</td><td>banana</td></tr> 
<tr><td>fruit</td><td>pear</td></tr> 
<tr><td>candy</td><td>jelly</td></tr> 
<tr><td>candy</td><td>toffee</td></tr> 
<tr><td>candy</td><td>fudge</td></tr> 
</tbody> 
</table> 
</body> 
</html>

は、任意のヒントをありがとう！

更新：私はthe DataTables forumでも尋ねました。

出典

2011-11-08 Alexander Farber

ここafnFilteringを使用して独自のソリューションがあるのフィルタリングREG発現のために「真」に第三のparamを設定するには、それがうまく動作します。

fnFilterを使用してfbasの解決が嫌いでした。これは、検索フィールドに検索文字列が表示されるためです。（でも、あなたの提案に感謝します）。

<html> 
<head> 
<style type="text/css" title="currentStyle"> 
     @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"; 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script> 
<script type="text/javascript"> 

$.fn.dataTableExt.afnFiltering.push(
     function(oSettings, aData, iDataIndex) { 
       var isFruit = (aData[0] == 'fruit'); 
       return (isFruit ? $('#fruit').is(':checked') : 
            $('#candy').is(':checked')); 
     } 
); 

$(function() { 
     var my_table = $('#my_table').dataTable({ 
       bJQueryUI: true, 
       aoColumns: [ 
         /* type */ { bVisible: false, 
             bSearchable: false }, 
         /* thing */ null 
       ], 

     }); 

     $(':checkbox').click(function() { 
       my_table.fnDraw(); 
     }); 
}); 

</script> 
</head> 
<body> 

<p>What should be shown:</p> 
<p><label><input type="checkbox" id="fruit">fruit</label></p> 
<p><label><input type="checkbox" id="candy">candy</label></p> 

<table id="my_table"> 
<thead> 
<tr> 
<th>Type</th> 
<th>Thing</th> 
</tr> 
</thead> 
<tbody> 
<tr><td>fruit</td><td>apple</td></tr> 
<tr><td>fruit</td><td>banana</td></tr> 
<tr><td>fruit</td><td>pear</td></tr> 
<tr><td>candy</td><td>jelly</td></tr> 
<tr><td>candy</td><td>toffee</td></tr> 
<tr><td>candy</td><td>fudge</td></tr> 
</tbody> 
</table> 
</body> 
</html>

出典

2011-11-12 13:44:37

チェックボックスを反復処理は、「果物」である場合は、「タイプ」列すなわち

ためfnFilterに合格すること（正規表現で）検索文字列を作成すること（変化）あなたのチェックボックスにハンドラを追加チェックし、fnFilterは "キャンディ" がチェックされている場合、fnFilterが届きますすなわち "^フルーツ$"

"^キャンディ$" の両方がチェックされている場合

すなわち、fnFilterが受け取る「を受け取ることになります^キャンディ$ | ^果物$ "

fnFilterとその列の検索文字列が、また、

http://www.datatables.net/ref#fnFilter

出典

2011-11-09 17:50:11 fbas

は、私は例を挙げて取り組んでいると多分私はより良いhttp://www.datatables.net/release-datatables/examples/plug-ins/range_filteringのように$ .fn.dataTableExt.afnFilteringを使用する、ありがとう.htmlを呼び出してfnDraw（）を呼び出すと、 –

jQuery DataTables：チェックボックスをクリックするとDOM行をフィルタリングする方法は？

答えて

関連する問題