dataTables update breaks $.fn.dataTableExt.afnFiltering - simple test case attached

StackOverflow https://stackoverflow.com/questions/21909344

سؤال

With jQuery delivered by Google CDN and DataTables delivered by Microsoft CDN I have the following page, where 3 checkboxes allow toggling good, bad, neutral comments about some user (here fullscreen):

browser screenshot

My problem is:

With DataTables 1.9.2 this works well: here jsFiddle

With DataTables 1.9.4 this does not work: here jsFiddle and a copy of my simple test case is at the bottom of this question.

The problematic code is probably here:

$.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;
        }
);

The console.dir(aData); prints for dataTables 1.9.2 a 4-elements array and I can grab its last element (shown by the red arrow in the above screenshot).

But for DataTables 1.9.4 it only prints a 1-element array for some reason. Why?

<!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>

I have posted this question at the DataTables forum as well.

هل كانت مفيدة؟

المحلول

The workaround for now is to make the 4th (nice) column searchable too and use the code

var nice = aData[1];

Here is the jsFiddle, which works with 1.9.4

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top