我为我的问题准备了一个简单的测试用例。
只需将其保存到磁盘并在浏览器中打开 - 它会立即运行，您无需下载或安装任何内容。
这是我的测试用例的屏幕截图:
我的问题是:当用户选择水果和/或糖果时，如何过滤表中的行？这里调用什么函数，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 询问过也是。
最佳答案
这是我自己的解决方案，使用 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>
关于单击复选框时 jQuery DataTables : how to filter DOM rows,？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8052976/