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我自己的解決方案，它工作得很好。

我不喜歡fbas的解決方案，使用fnFilter，因爲這會導致搜索字符串顯示在搜索字段中。（但仍然感謝您的建議）。

<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調用該列搜索字符串，還設置第三個參數爲「true」爲reg表達式過濾

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

來源

2011-11-09 17:50:11 fbas

謝謝你，我通過實例的工作，也許我應該更好地使用$ .fn.dataTableExt.afnFiltering作爲http://www.datatables.net/release-datatables/examples/plug-ins/range_filtering .html，然後調用fnDraw（） –

jQuery DataTables：如何在點擊複選框時過濾DOM行？

回答

相關問題