Vous initialisez deux fois des tables de données, pourquoi?

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

Essayez d’append “bDestroy”: true au littéral d’object options, par exemple

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

Source: iodocs.com

ou Supprimer le premier :

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

Dans votre cas, la meilleure option est vjk .

Vous pouvez également détruire l’ancien datatable en utilisant le code suivant avant de créer le nouveau datatable :

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

Ce problème se produit si nous initialisons plusieurs fois dataTable. Ensuite, nous devons supprimer le précédent.

D’un autre côté, nous pouvons détruire l’ancien datatable de la même manière avant de créer le nouveau datatable, utilisez le code suivant:

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

Il existe un autre scénario, disons que vous envoyez plus d’une demande ajax dont la réponse accédera à la même table dans le même modèle, nous obtiendrons également une erreur. Dans ce cas, la méthode fnDestroy ne fonctionne pas correctement car vous ne savez pas quelle réponse vient en premier. ou plus tard. Ensuite, vous devez définir bResortingeve TRUE dans la configuration de la table de données.

C’est mon senario:

Vous pouvez append destroy:true à la configuration pour vous assurer que la table de données déjà présente est supprimée avant d’être réinitialisée.

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

Ajoutez “bDestroy”: true dans votre dataTable Like: –

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

Ça va marcher.

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

Faites-en une classe pour pouvoir instancier plusieurs tables à la fois

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

Supprimer le premier:

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

Dans mon cas, l’appel ajax était perturbé par la balise de plug-in de données appliquée à la table. Le plug-in de données effectue l’initialisation en arrière-plan et générera cette erreur lorsque vous l’utiliserez, ainsi que yourTable.DataTable ({…}); initialisation.

De

À

Cherchez une longue ligne dans votre code où vous avez initialement créé la table qui ressemble à

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

puis ajoutez ce qui suit à la ligne ci-dessus pour modifier les options de la zone de sélection

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

ou ajoutez ce qui est en dessous pour modifier l’option sélectionnée dans la zone de sélection (assurez-vous simplement qu’elle correspond à une valeur initialement présente ou, si vous avez ajouté la ligne ci-dessus, qu’elle correspond à l’un des nombres qu’elle contient.

 "iDisplayLength": 60 

le résultat final avec les deux options ci-dessus ajoutées ressemble à ceci lorsque j’ai collé le code initial ci-dessus:

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

Dans mon cas

De

À

Résolu mon problème