Question

通过由Microsoft CDN提供的Google CDN和DataTables提供的jQuery，我有以下页面，其中3个复选框允许切换关于某些用户的好的，坏的，中性的评论（这里是fullscreen）：

browser screenshot

我的问题是：

使用DataTables 1.9.2，效果很好：jsFiddle

使用DataTables 1.9.4这不起作用：这里jsFiddle，我的简单测试用例的副本就在这个问题的底部。

有问题的代码可能在这里：

$.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex) {
                if ('comments_table' == oSettings.nTable.id) {
                        //console.dir(oSettings);
                        console.dir(aData);

                        var nice = aData[3];

                        if (nice == true)
                                return $('#good_box').is(':checked');

                        if (nice == false)
                                return $('#bad_box').is(':checked');

                        return $('#neutral_box').is(':checked');
                } 

                return true;
        }
);

console.dir(aData);打印dataTables 1.9.2一个4元素数组，我可以抓住它的最后一个元素（如上面屏幕截图中的红色箭头所示）。

但对于DataTables 1.9.4，由于某种原因，它只打印1个元素的数组。为什么呢？

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<style type="text/css">
        a img.good {
                border: 3px solid #009900;
        }

        a img.bad {
                border: 3px solid #FF3333;
        }

        a img.neutral {
                border: 3px solid #9999FF;
        }
</style>
<script type="text/javascript" src="https://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.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">

var ME = "http://gravatar.com/avatar/55b3816622d935e50098bb44c17663bc.png";

$(function() {

        $.fn.dataTableExt.afnFiltering.push(
                function(oSettings, aData, iDataIndex) {
                        if ('comments_table' == oSettings.nTable.id) {
                                //console.dir(oSettings);
                                console.dir(aData);

                                var nice = aData[3];

                                if (nice == true)
                                        return $('#good_box').is(':checked');

                                if (nice == false)
                                        return $('#bad_box').is(':checked');

                                return $('#neutral_box').is(':checked');
                        } 

                        return true;
                }
        );

        $('#good_box,#bad_box,#neutral_box').click(function() {
                commentsTable.fnDraw();
        });

        var commentsTable = $('#comments_table').dataTable({
                bJQueryUI: true,
                sPaginationType: 'full_numbers', 
                bProcessing: true,
                bDeferRender: true,
                aaData: [
                {"day":"17.02.2014","about":"A neutral comment about this user","nice":null,"female":false,"author":"OK250354887500","rep_id":960962,"avatar":ME},{"day":"30.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE10859","avatar":ME},{"day":"23.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"OK100836631753","avatar":ME},{"day":"01.04.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE8547","avatar":ME},{"day":"29.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"OK462728443459","rep_id":734122,"avatar":ME},{"day":"26.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE10472","avatar":ME},{"day":"24.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE9454","avatar":ME},{"day":"22.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"DE6294","rep_id":727815,"avatar":ME},{"day":"04.02.2013","about":"A neutral comment about this user","nice":null,"female":false,"author":"VK119456690","rep_id":683816,"avatar":ME}
                ],
                fnInitComplete: function () { this.fnAdjustColumnSizing(); },
                aaSorting: [[0, 'desc']],
                aoColumns: [
                        /* 0: day */    { mDataProp: 'day',    bSearchable: false, bSortable: true,  bVisible: true },
                        /* 1: about */  { mDataProp: 'about',  bSearchable: true,  bSortable: false, fnRender: renderAbout },
                        /* 2: avatar */ { mDataProp: 'avatar', bSearchable: false, bSortable: false, fnRender: renderAvatar },
                        /* 4: nice */   { mDataProp: 'nice',   bSearchable: false, bSortable: false, bVisible: false }
                ]
        });
});

function renderAbout(obj) {
        var about = obj.aData['about'];
        var rep_id = obj.aData['rep_id'];

        if (rep_id) {
                return '<i>&laquo;' + about + '&raquo;</i> <a href="#" onclick="return confirm(\'Really delete?\');">delete</a>';
        }

        return '<i>&laquo;' + about + '&raquo;</i>';
}

function renderAvatar(obj) {
        var avatar = obj.aData['avatar'];
        var author = obj.aData['author'];
        var nice   = obj.aData['nice'];

        if (author) {
                var cls = 'neutral';
                if (nice == true)
                        cls = 'good';
                else if (nice == false)
                        cls = 'bad';

                return '<a href="http://preferans.de/' + author + '"><img class="' + cls + '" height="45" src="' + avatar + '"></a>';
        }

        return '<img height="45" src="' + avatar + '">';
}

</script>
</head>
<body>

<p>Show:
<label><input type="checkbox" id="good_box" checked>good</label>
<label><input type="checkbox" id="bad_box" checked>bad</label>
<label><input type="checkbox" id="neutral_box" checked>neutral</label>
comments:</p>

<table id="comments_table">
<thead>
<tr>
<th>Date</th>
<th>Comment</th>
<th>Author</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

</body>
</html>

我也发布了这个问题at the DataTables forum。

Answer 1

现在的解决方法是使第4个（漂亮的）列也可以搜索并使用代码

var nice = aData[1];

以下是jsFiddle，适用于1.9.4

dataTables update break $ .fn.dataTableExt.afnFiltering - 附加简单的测试用例

1 个答案: