Advertencia de tablas de datos (id de la tabla = ‘ejemplo’): no se puede reinicializar la tabla de datos

Estoy trabajando con el ejemplo de tablas de datos y obtengo un error como este al cargar la página: advertencia de tablas de datos (id de la tabla = ‘ejemplo’): no se puede reiniciar la tabla de datos. Para recuperar el objeto DataTables para esta tabla, no pase argumentos ni vea los documentos para bRetrieve y bDestroy.

Estaba tratando de probar el fnRowCallback

     DataTables live example    @import "DataTables/media/css/demo_table.css";     $(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' ); } } } ); } );  

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

¿Qué estoy haciendo mal en esto?

Estás inicializando datatables dos veces, ¿por qué?

 // 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' ); } } } ); } ); 

Intente agregar “bDestroy”: verdadero al literal del objeto de opciones, por ejemplo

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

Fuente: iodocs.com

o eliminar el primero :

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

En tu caso es la mejor opción vjk .

También puede destruir la datatable de datos anterior utilizando el siguiente código antes de crear la nueva datatable :

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

Puede agregar destroy:true a la configuración para asegurarse de que la tabla de datos ya presente se elimine antes de reiniciarse.

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

Este problema ocurre si inicializamos DataTable más de una vez. Luego tenemos que eliminar el anterior.

Por otro lado, podemos destruir la tabla de datos anterior de esta manera también antes de crear la nueva tabla de datos use el siguiente código:

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

Hay otro escenario, por ejemplo, si envía más de una solicitud AJAX, cuya respuesta accederá a la misma tabla en la misma plantilla, entonces también obtendremos un error. En este caso, el método fnDestroy no funciona correctamente porque no sabe qué respuesta viene primero o más tarde. Luego debe establecer bRetrieve TRUE en la configuración de la tabla de datos. bRetrieve TRUE es todo.

Este es mi senario:

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

Haz que sea una clase para que puedas instanciar varias tablas a la vez

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

Agregue “bDestroy”: true en su dataTable Like: –

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

Funcionará.

Eliminar el primero:

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

En mi caso, la llamada ajax estaba siendo interferida por la etiqueta del plugin de datos aplicada a la tabla. El complemento de datos realiza la inicialización en segundo plano y proporcionará este error cuando lo tenga así como yourTable.DataTable ({…}); inicialización

De

  

A

 

Busca una línea larga en tu código donde inicialmente creas la tabla que se parece a

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

luego agregue lo siguiente a la línea anterior para cambiar las opciones en el cuadro de selección

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

o agregue lo que está debajo para cambiar la opción seleccionada en el cuadro de selección (simplemente asegúrese de que coincida con un valor inicialmente allí, o si agregó la línea anterior, que coincida con uno de los números que contiene).

 "iDisplayLength": 60 

el resultado final con las dos opciones anteriores añadidas se ve así cuando con el código inicial pegué primero:

 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(); }); 

En mi caso

De

 

A

 

Resolvió mi problema