Datatables avertissement(table id = "exemple"): ne peut pas réinitialiser les données de la table

Je suis en train de travailler avec les tables de données exemple et obtenir une erreur, comme cela lors du chargement de la page:
Datatables avertissement(table id = "exemple"): ne peut pas réinitialiser les données de la table.
Pour récupérer les tables de données de l'objet de cette table, ne transmettez pas d'arguments ou de voir les docs pour bRetrieve et la détruise.

J'étais en train de tester la fnRowCallback

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables live example</title>
<script type="text/javascript" charset="utf-8" src="DataTables/media/js/jquery.js"></script>
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<style type="text/css">
@import "DataTables/media/css/demo_table.css";
</style>
</head>
<body id="dt_example">
<script>
$(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( '<b>A</b>' );
}
}
} );
} );
</script>
<div id="container">
<h1>Live example</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ /OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ /OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Ce que je fais mal en cela?

InformationsquelleAutor vjk | 2012-12-04

Vous initialisation des tables de données deux fois, 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( '<b>A</b>' );
}
}
} );
} );

InformationsquelleAutor Nicola Peluchetti

110

Essayez d'ajouter "détruise": true pour les options littéral d'objet, par exemple
```
$('#dataTable').dataTable({
...
....
"bDestroy": true
});
```
Source: iodocs.com

ou Supprimer le premier:
```
$(document).ready(function() {
$('#example').dataTable();
} );
```
Dans votre cas est la meilleure option vjk.
- Important de remarquer que même si cela va résoudre le problème, il n'aborde le problème d'origine, c'est l'inutile dupliqué initialisation des tables de données.
InformationsquelleAutor RckLN
51

Vous pouvez également détruire l'ancien datatable en utilisant le code suivant avant la création de la nouvelle datatable:
```
$("#example").dataTable().fnDestroy();
```
InformationsquelleAutor Soma Sarkar
13

Vous pouvez ajouter destroy:true à la configuration assurez-vous que la table de données déjà présente est retiré avant d'être réinitialisé.
```
$('#example').dataTable({
destroy: true,
...
});
```
- Thankz copain. Vous enregistrez mon temps......
InformationsquelleAutor Kent Aguilar
13

Ajouter "détruise": true dans votre dataTable Comme:-
```
   $('#example').dataTable({
....
stateSave: true,
"bDestroy": true
});
```
Il Va Travailler.
- merci beaucoup ça a fonctionné.
- merci cela a fonctionné
- Merci pour ce partage. Il a travaillé comme un charme pour moi. Génial.
InformationsquelleAutor Javed
8

Ce problème se produit si nous initialisons dataTable plus d'une fois.Ensuite, nous avons supprimer le précédent.

D'autre part, on peut détruire l'ancien datatable de cette façon aussi, avant de créer le nouveau datatable utiliser le code suivant :
```
$(“#example”).dataTable().fnDestroy();
```
Il y a un autre scénario ,que vous envoyez plus d'une requête ajax qui la réponse de l'accès d'une même table dans le même modèle, puis nous aurons d'erreur aussi.Dans ce cas fnDestroy méthode ne fonctionne pas correctement parce que vous ne connaissez pas la réponse vient en premier, ou plus tard.Ensuite, vous devez définir bRetrieve TRUE dans les données de configuration de la table.C'est tout.

C'est Mon senario:
```
<script type="text/javascript">
$(document).ready(function () {
$('#DatatableNone').dataTable({
"bDestroy": true
}).fnDestroy();
$('#DatatableOne').dataTable({
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["sorting_disabled"]
}],
"bDestroy": true
}).fnDestroy();
});
</script>
```
- J'ai Appellé Ici
- Merci mec,très Utile
InformationsquelleAutor RajeshKdev
7
```
$('#example').dataTable();
```
En faire une classe de sorte que vous pouvez instancier plusieurs tables à la fois
```
$('.example').dataTable();
```
- +1 dans d'autres scénario de son travail aussi :). Je ne sais pas pourquoi sa ne fonctionne pas dans mon scénario. 🙁
InformationsquelleAutor Pabsy

Supprimer le premier:

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

InformationsquelleAutor KingKongFrog

Vous devez détruire le datatable et vider le corps de table avant de liaison DataTable en faisant cela, ci-dessous,

function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
$('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}

InformationsquelleAutor KIshorekumar SP

0

Dans mon cas, l'appel ajax était perturbé par les données-plugin tag appliquée à la table. Les données plugin ne initialisation en arrière-plan et de donner ce message d'erreur lorsque vous en avez ainsi que yourTable.DataTable({ ... }); initialisation.

De
```
 <table id="myTable" class="table-class" data-plugin="dataTable" data-source="data-source">
```
À
```
<table id="myTable" class="table-class" data-source="data-source">
```
InformationsquelleAutor aabiro

-1

Regarder pendant une longue ligne dans votre code lorsque vous créez la table qui donne l'impression d'être

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 les lignes suivantes à la ligne ci-dessus pour modifier les options dans la boîte de sélection

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

ou ajouter ce qui est ci-dessous pour modifier l'option sélectionnée dans la boîte de sélection (assurez-vous qu'il correspond à une valeur au départ, ou si vous avez ajouté la ligne ci-dessus, qu'il correspond à l'un des numéros en elle.

"iDisplayLength": 60

le résultat final avec les deux options ci-dessus ajouté ressemble à ça quand avec code initial, j'ai collé de la première 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();
});

InformationsquelleAutor NickNo

-2

Dans mon cas

<table id="example" class="display compact table-hover" cellspacing="0" >

<table id="example" class="table table-condensed table-hover" cellspacing="0" >

Résolu mon problème

InformationsquelleAutor ErcanE

Vous devez vous connecter pour publier un commentaire.