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

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

Domanda

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.

È stato utile?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top