API warning on Table where everything looks to be working fine.
API warning on Table where everything looks to be working fine.
Hi there, I've started using a DataTable to display a schedule of information on our website. The schedule lists two types of information, 'screening' and 'event' and I wanted to create a way that the user could filter out the 'screening' information. I opted to add a couple buttons and target the table through a .fnFilter API call. Specifically, but default all records show, one button filters only records that contain 'event' in a hidden field while the other button returns the form to the default.
It only took me a second to add the appropriate call:
[code]
$("#filter_film").click(function(){
$('#listings').dataTable().fnFilter('event',6,true);
});
$("#filter_none").click(function(){
$('#listings').dataTable().fnFilter('',6,true);
});
[/code]
When I went to reloaded the page though I received an error.
"DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required."
The thing is, it works just fine after I press "ok" and close the alert. My records are filtered exactly as I would suspect and I can click back-and-forth between the two states and (except for the alert) everything works exactly as I intended. I fired up Firebug thinking there might be a clue to the problem, but other than an unrelated syntax error the page loads without error.
You can view the page at: http://www.hotdocs.ca/schedule/industry/archive/2009
Have any ideas what could be causing this? The alert tells me to "use the API" but that's what I'm doing or at least think I'm doing.
Other than this little problem, it's an amazing piece of code and seems like a really good fit for what I need on the site.
It only took me a second to add the appropriate call:
[code]
$("#filter_film").click(function(){
$('#listings').dataTable().fnFilter('event',6,true);
});
$("#filter_none").click(function(){
$('#listings').dataTable().fnFilter('',6,true);
});
[/code]
When I went to reloaded the page though I received an error.
"DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required."
The thing is, it works just fine after I press "ok" and close the alert. My records are filtered exactly as I would suspect and I can click back-and-forth between the two states and (except for the alert) everything works exactly as I intended. I fired up Firebug thinking there might be a clue to the problem, but other than an unrelated syntax error the page loads without error.
You can view the page at: http://www.hotdocs.ca/schedule/industry/archive/2009
Have any ideas what could be causing this? The alert tells me to "use the API" but that's what I'm doing or at least think I'm doing.
Other than this little problem, it's an amazing piece of code and seems like a really good fit for what I need on the site.
This discussion has been closed.
Replies
Here is what I came up with from the API docs as just an example.
[code]$("#processed").click(function() {
var oTable;
oTable = $('#allclaims').dataTable();
/* Filter immediately */
oTable.fnFilter( 'alexander' );
});[/code]
You have to assign the oTable variable to the dataTable initialization and then it will work. Here is my sample code, hopefully you can figure out what I did from my jumbled mess :)
[code]var oTable;
$(document).ready(function() {
oTable = $('#allclaims').dataTable( {
"sPaginationType": "full_numbers",
"bSort": false,
"bProcessing": true,
"bAutoWidth": false,
"iDisplayLength": 25,
"bServerSide": true,
"aoColumns": [
null,
null,
{ "sClass": "center" },
null,
null,
{ "sClass": "rightalign" },
null,
{ "sClass": "center" },
null],
"sAjaxSource": "assets/php/process.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "allclaims", "value": "1" } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
}
} );
$("#processed").click(function() {
/* Filter immediately */
oTable.fnFilter( 'whatever' );
});
} );[/code]
I tried it and it works!
I have 3 distinct table on the same page.
table 1
[code]
var oTable;
var asInitVals = new Array();
jQuery(document).ready(function()
{
jQuery('#example_detail tr').click( function()
{
if ( jQuery(this).hasClass('row_selected') )
jQuery(this).removeClass('row_selected');
else
jQuery(this).addClass('row_selected');
} );
TableToolsInit.sSwfPath = "/javascripts/ZeroClipboard/ZeroClipboard.swf";
oTable = jQuery('#example_detail').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sSearch": "Search all columns:"
}
});
jQuery("#rechercher_commandes input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, jQuery("#rechercher_commandes input").index(this) );
} );
jQuery("#rechercher_commandes input").each( function (i) {
asInitVals[i] = this.value;
} );
jQuery("#rechercher_commandes input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
jQuery("#rechercher_commandes input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[jQuery("#rechercher_commandes input").index(this)];
}
} );
} );
[/code]
table2
[code]
var oTable2;
var asInitVals2 = new Array();
jQuery(document).ready(function()
{
/********************************
* example_detail_factures
****************************** */
jQuery('#example_detail_factures tr').click( function()
{
if ( jQuery(this).hasClass('row_selected') )
jQuery(this).removeClass('row_selected');
else
jQuery(this).addClass('row_selected');
} );
oTable2 = jQuery('#example_detail_factures').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sSearch": "Search all columns:"
}
});
jQuery("#rechercher input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable2.fnFilter( this.value, jQuery("#rechercher input").index(this));
} );
jQuery("#rechercher input").each( function (j) {
asInitVals2[j] = this.value;
} );
jQuery("#rechercher input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
jQuery("#rechercher input").blur( function (j) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals2[jQuery("#rechercher input").index(this)];
}
} );
});
[/code]
table3
[code]
var oTable3;
jQuery(document).ready(function()
{
oTable3 = jQuery('#top_10_factures').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sSearch": "Search all columns:"
}
});
});
[/code]
I have this alert since i changed the parameter in fnfilter (index).
if don't do this, my second table start whith the index +1 of the previous table not at 0
Do you now why i have this alert "DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required."
And how solve this problem
ThX