Issue with fnFilter [solved]
Issue with fnFilter [solved]
ck80
Posts: 1Questions: 0Answers: 0
I'm using the example here:
http://datatables.net/examples/api/multi_filter.html
to use the fnFilter, however when I call it in my browser (Chrome) I'm getting the following:
Uncaught TypeError: Object [object Object] has no method 'fnFilter'
Here's my code, any help would be GREATLY appreciated.
[code]
var asInitVals = new Array();
$(window).load(function() {
var oTable = $('#table-example').dataTable();
//$(window).resize();
$("tfoot input").keyup( function () {
// Filter on the column (the index) of this element
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
});
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});
[/code]
Edit:
Also, I should note that the table is being "datatable-ified" fine, and the global search is working correctly, it's just the column filters that are causing issues.
Solved:
I'm not 100% sure what the problem is, I had the way up in the header, and I moved it to right above the code I was trying to execute, and all started to work.
http://datatables.net/examples/api/multi_filter.html
to use the fnFilter, however when I call it in my browser (Chrome) I'm getting the following:
Uncaught TypeError: Object [object Object] has no method 'fnFilter'
Here's my code, any help would be GREATLY appreciated.
[code]
var asInitVals = new Array();
$(window).load(function() {
var oTable = $('#table-example').dataTable();
//$(window).resize();
$("tfoot input").keyup( function () {
// Filter on the column (the index) of this element
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
});
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});
[/code]
Edit:
Also, I should note that the table is being "datatable-ified" fine, and the global search is working correctly, it's just the column filters that are causing issues.
Solved:
I'm not 100% sure what the problem is, I had the way up in the header, and I moved it to right above the code I was trying to execute, and all started to work.
This discussion has been closed.
Replies
I presume it was line 15 that was throwing the error? Looking at the code, everything looks like it should be correct there - oTable is defined before being used, so I'm surprised that would be causing an issue. If it was that line, then it only happened when you actually tried to filter a column - is that correct?
However, I am wondering what effect the 'defer' attribute on your script tag will have. That will bump the request of the get of the DataTables script to the point of window.load - the tag that contains the DataTables initialisation also has the defer attribute, so I presume (although I'm not certain) the browser will still load and execute the scripts in sequence. Otherwise it might be that the initialisation runs before the DataTables script has been fully loaded. But that would give you a script error when calling the $().dataTable() method...!
Good to hear you have a workaround now, but if you have a link you can give me showing the issue, I'll take a look to see if I can figure out what was going wrong.
Regards,
Allan
I tried taking out defer statements in the script tags, and re-ordering the javascript includes to happen right before the script containing the fnFilter, but that doesn't seem to help in this case. Everything else is extremely close to the example code presented on datatables.net, so i'm at a loss for why its having an error on two browsers, but working on firefox. I've tried declaring oTable before the document.ready function, using keydown, keypress. its detecing the keystroke, and then breaking on the otable.fnFilter. I know via debug alerts i was using that its getting this.value and the index(this) properly.
edit: using datatables 1.9.4, tabletools 2.1.4
[code]
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $( '#example' ).dataTable( {
"oLanguage" : {
"sSearch" : "Search all columns:"
},
"sAjaxSource" : "/index.php/wizard",
"sDom" : 'T<"clear">lfrtip',
"oTableTools" : {
"sSwfPath" : "/swf/copy_csv_xls_pdf.swf",
"aButtons" : [
"copy",
"csv"
]
}
} );
$(window).resize();
$( "thead input" ).keyup( function () {
/* filter on the coumn (the index) of this element */
oTable. fnFilter ( this.value, $( "thead input" ).index( this ) );
} );
$( "thead input" ).each( function (i) {
asInitVals[i] = this.value;
} );
$( "thead input" ).focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$( "thead input" ).blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[ $( "thead input" ).index( this )];
}
} );
});
'
[/code]
Allan
Uncaught TypeError: Object [object Object] has no method 'fnFilter' index.php:181
$.each.asInitVals.(anonymous function) index.php:181
jQuery.event.dispatch jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle
if that provides any insight.