dataTables update breaks $.fn.dataTableExt.afnFiltering - simple test case attached
dataTables update breaks $.fn.dataTableExt.afnFiltering - simple test case attached
afarber
Posts: 53Questions: 0Answers: 0
Hello!
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.
Screenshot: http://i.stack.imgur.com/xqMKz.png
My problem is:
With dataTables 1.9.2 this works well: http://jsfiddle.net/afarber/EtyUZ/
With dataTables 1.9.4 this does not work: http://jsfiddle.net/afarber/66mXf/
The problematic code is probably here:
[code]
$.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;
}
);
[/code]
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?
Below is a copy of my simple test case, please exchange 1.9.4 for 1.9.2 to see the difference:
[code]
<!DOCTYPE html>
a img.good {
border: 3px solid #009900;
}
a img.bad {
border: 3px solid #FF3333;
}
a img.neutral {
border: 3px solid #9999FF;
}
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 '«' + about + '» delete';
}
return '«' + about + '»';
}
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 '';
}
return '';
}
Show:
good
bad
neutral
comments:
Date
Comment
Author
Rating
[/code]
Thank you
Alex
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.
Screenshot: http://i.stack.imgur.com/xqMKz.png
My problem is:
With dataTables 1.9.2 this works well: http://jsfiddle.net/afarber/EtyUZ/
With dataTables 1.9.4 this does not work: http://jsfiddle.net/afarber/66mXf/
The problematic code is probably here:
[code]
$.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;
}
);
[/code]
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?
Below is a copy of my simple test case, please exchange 1.9.4 for 1.9.2 to see the difference:
[code]
<!DOCTYPE html>
a img.good {
border: 3px solid #009900;
}
a img.bad {
border: 3px solid #FF3333;
}
a img.neutral {
border: 3px solid #9999FF;
}
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 '«' + about + '» delete';
}
return '«' + about + '»';
}
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 '';
}
return '';
}
Show:
good
bad
neutral
comments:
Date
Comment
Author
Rating
[/code]
Thank you
Alex
This discussion has been closed.
Replies
That took me a little while to figure out - well found! I can't quite decide if this is a bug or not... The result you are seeing this problem is because you have `bSearchable: false` on all but one column. With the searchable false being false for the column, the data isn't obtained for the filter, since it can't be filtered!
So its kind of a bug in 1.9.2 (and earlier). But at the same time, the behaviour in 1.9.4 is really not all that useful... What you really want is the original data source object.
This error is also present in 1.10, and I'm very much included to change how it works to simply pass in the data source object. That might break some scripts which rely upon this quirk though...
I'm very my in favour of calling this a bug and fixing it in 1.10 - but let me sleep on it.
Allan
So as workaround I've made the "nice" column searchable too and then went for
[code]
var nice = aData[1];
[/code]
http://jsfiddle.net/66mXf/3/
Regards
Alex
Perhaps I should give up and just pass in both forms, although I would be nice to remove the code that exists currently. I'm trying to shave about 1-2K from the size before the 1.10 release...
Allan
This might cause an issue if you have used bVisible such as in this case and the indexes might be off, but int he majority of cases, I don't think it will be an issue. I'll mention it in the upgrade notes.
Thanks for flagging this up.
Allan