The Dreaded TypeError: Cannot read property 'oFeatures' of null - how to solve it?

Joyrex

I'm currently trying to implement a button to clear the filtered results on a dataTable, and while it DOES clear the field and reset the filtering, I get the dreaded "TypeError: Cannot read property 'oFeatures' of null" JS error. I've read similar posts on it, and for the life of me cannot see what's wrong with my code - keep in mind I'm implementing dataTables with Twitter Bootstrap 3.0.0 (using Alan's code for Bootstrap 3/dataTables posted to GitHub), along with my own custom changes (display changes; no changes to underlying JS files other than the inline code below. Can anyone help me see the obvious?
[code]
$(document).ready( function() {
oTable = $('#memberLogs').dataTable( {
"bLengthChange": true,
"aaSorting": [[ 2,"desc"]],
"iDisplayLength": 10
});
$('#memberLogs_length label select').addClass('form-control');
$('#memberLogs_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
$('#memberLogs_filter input').addClass('form-control').attr('placeholder','type to filter results').wrap('').after('');
$('button.btn.btn-danger').click(function(){
$('#memberLogs_filter input').val('');
oTable.fnFilter('');
});
});
[/code]

The really strange thing is similar code works fine with Bootstrap 2.x (I had developed this code for Bootstrap 2.x originally) - I can't see how it could be anything Bootstrap is doing, but I could be wrong. I've posted that below for reference as well.
[code]
$(document).ready( function() {
oTable = $('#tblMembers').dataTable( {
"sDom": "<'row-fluid hidden-phone'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bLengthChange": true,
"bStateSave": true,
"sCookiePrefix": "members_",
"aaSorting": [[ 0,"asc"]],
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": "_MENU_ Records per page"
}
});
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sSearch": "Filter records"
});
$('#tblMembers_filter label input').attr('placeholder','type to filter results').addClass('search-query').wrap('').after('');
$('i.icon.icon-remove').click(function(){
$(this).parent().find('input').val('');
oTable.fnFilter("");
});
});
[/code]

dooban

Did you manage to solve the problem ? I am facing the same dreaded message.

allan

Please post a test case so we can offer some help.

Joyrex

Seeing this made me go back (to see if I did indeed solve my issue) and to post a solution - turns out, I had not solved it (moved on to other things since this was a minor issue at the time), and in looking at it with fresh eyes, it turned out it was due to me having 2 dataTables scripts on the page at one time (the tables themselves were dynamically generated depending on user input, but I put both dataTable script calls on the page, thinking (incorrectly) that since each table had it's own ID, the script would ignore the other script call for the other table ID.

Turns out that I had a common element between both script calls (the oTable.fnFIlter) and it was getting confused as to which script I was referring to - I commented out the second script call, and sure enough, the error went away. I ended up moving the script calls into the blocks of code on my page that dynamically determine which dataTable to display, so the relevant script call is included only.

If you are using more than one dataTable on your page, this might be the cause - hope this helps you!