2

我为我的问题准备了一个简单的测试用例。

只需将其保存到磁盘并在浏览器中打开 - 它会立即运行，您无需下载或安装任何东西。

这是我的测试用例的屏幕截图：

截屏

我的问题是：当用户选择水果和/或糖果时，如何过滤表中的行？在这里调用什么函数，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>

感谢您的任何提示！

更新：我也在DataTables 论坛上问过。

4

2 回答 2

3

这是我自己使用afnFiltering的解决方案，效果很好。

我不喜欢使用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-12T13:44:37.343 回答
0

为您的复选框添加一个处理程序（更改时），该处理程序遍历复选框，创建一个搜索字符串（带有正则表达式），您将其传递给“类型”列的 fnFilter

即如果“fruit”被选中，fnFilter 将收到“^fruit$”

即如果选中“candy”，fnFilter 将收到“^candy$”

即如果两者都被选中，fnFilter 将收到 "^candy$|^fruit$"

使用该列的搜索字符串调用 fnFilter，但还将第 3 个参数设置为“true”以进行 reg 表达式过滤

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

于 2011-11-09T17:50:11.080 回答