Datatables warning(table id = 'example'): cannot reinitialise data table

问题:

I am working with datatables example and getting an error like this when loading page: Datatables warning(table id = 'example'): cannot reinitialise data table. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.

I was trying to test the fnRowCallback

     
   
Live example
    
Rendering engine
         
Browser
         
Platform(s)
         
Engine version
         
CSS grade
       
Trident
         
Internet Explorer 4.0
         
Win 95+
         
 4
         
X
       
Trident
         
Internet Explorer 5.0
         
Win 95+
         
5
         
C
       
Trident
         
Internet Explorer 5.5
         
Win 95+
         
5.5
         
A
       
Trident
         
Internet Explorer 6
         
Win 98+
         
6
         
A
       
Trident
         
Internet Explorer 7
         
Win XP SP2+
         
7
         
A
       
Trident
         
AOL browser (AOL desktop)
         
Win XP
         
6
         
A
       
Gecko
         
Firefox 1.0
         
Win 98+ / OSX.2+
         
1.7
         
A
       
Gecko
         
Firefox 1.5
         
Win 98+ / OSX.2+
         
1.8
         
A
       
Rendering engine
         
Browser
         
Platform(s)
         
Engine version
         
CSS grade
       
   

What am i doing wrong in this?

回答1:

You are initializing datatables twice, why?

// Take this off /* $(document).ready(function() {     $( '#example' ).dataTable(); } ); */ $(document).ready( function() {   $( '#example' ).dataTable( {    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {      // Bold the grade for all 'A' grade browsers      if ( aData[4] == "A" )      {        $('td:eq(4)', nRow).html( 'A' );      }    }  } );  } ); 

回答2:

Try adding "bDestroy": true to the options object literal, e.g.

$('#dataTable').dataTable({     ...     ....     "bDestroy": true }); 

Source: iodocs.com

or Remove the first:

$(document).ready(function() {     $('#example').dataTable(); } ); 

In your case is the best option vjk.

回答3:

You can also destroy the old datatable by using the following code before creating the new datatable:

$("#example").dataTable().fnDestroy(); 

回答4:

$('#example').dataTable(); 

Make it a class so you can instantiate multiple table at a time

$('.example').dataTable(); 

回答5:

This problem occurs if we initialize dataTable more than once.Then we have to remove the previous.

On the other hand we can destroy the old datatable in this way also before creating the new datatable use the following code :

$(“#example”).dataTable().fnDestroy(); 

There is an another scenario ,say you send more than one ajax request which response will access same table in same template then we will get error also.In this case fnDestroy method doesn’t work properly because you don’t know which response comes first or later.Then you have to set bRetrieve TRUE in data table configuration.That’s it.

This is My senario:

回答6:

You can add destroy:true to the configuration to make sure data table already present is removed before being reinitialized.

$('#example').dataTable({     destroy: true,     ... }); 

回答7:

Add "bDestroy": true in your dataTable Like:-

   $('#example').dataTable({     ....     stateSave: true,     "bDestroy": true     }); 

It Will Work.

回答8:

Remove the first:

$(document).ready(function() {     $('#example').dataTable(); } ); 

回答9:

Look for a long line in your code where you initially create the table that sort of looks like

jQuery(document).ready(function() {     jQuery("#example").dataTable({"bLengthChange":true,"bPaginate":true, "bJQueryUI":true}).rowGrouping({bExpandableGrouping:true, bExpandSingleGroup:false, iExpandGroupOffset:-1, asExpandedGroups:[""]});     GridRowCount();     ResetSearchField(); });  

then add the following to the above line to change the options in the select box

"aLengthMenu": [[60, 120, 240, -1], [20, 40, 80, "All"]]  

or add what's below to change the selected option in the select box (just make sure it matches a value initially there, or if you added the above line, that it matches one of the numbers in it.

"iDisplayLength": 60 

the end result with both of the above options added looks like this when with initial code I pasted first above:

jQuery(document).ready(function() {             jQuery("#example").dataTable({"iDisplayLength": 60, "aLengthMenu": [[60, 120, 240, -1], [20, 40, 80, "All"]], "bLengthChange":true, "bPaginate":true, "bJQueryUI":true}).rowGrouping({bExpandableGrouping:true, bExpandSingleGroup:false, iExpandGroupOffset:-1, asExpandedGroups:[""]});             GridRowCount();             ResetSearchField();         });  

回答10:

In my case

From

To
Solved my problem


 
文章来源: Datatables warning(table id = 'example'): cannot reinitialise data table