web-dev-qa-db-fra.com

Avertissement concernant les tableaux de données (id de table = 'exemple'): impossible de réinitialiser le tableau

Je travaille avec l'exemple de tables de données et j'obtiens une erreur comme celle-ci lors du chargement de la page: ou consultez la documentation de bRetrieve et bDestroy.

J'essayais de tester le 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>

Qu'est-ce que je fais de travers?

jqueryhtmldatatables
41
vjk

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( '<b>A</b>' );
     }
   }
 } );
 } );
30
Nicola Peluchetti

Essayez d’ajouter «bDestroy»: true au littéral d’objet d’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.

103
RckLN

Vous pouvez également détruire l'ancienne datatable en utilisant le code suivant avant de créer la nouvelle datatable:

$("#example").dataTable().fnDestroy();
47
Soma Sarkar

Vous pouvez ajouter 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,
    ...
});
11
Kent Aguilar

Ajoutez "bDestroy": true dans votre dataTable Like: -

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

Ça va marcher.

9
Javed

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 plusieurs requêtes ajax dont la réponse accédera à la même table dans le même modèle, nous obtiendrons également une erreur. ou plus tard.Ensuite, vous devez définir bRetrieve TRUE dans la configuration de la table de données.

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>
8
RajeshKdev
$('#example').dataTable();

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

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

Supprimer le premier:

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

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 

 <table id="myTable" class="table-class" data-plugin="dataTable" data-source="data-source">

À

<table id="myTable" class="table-class" data-source="data-source">
0
aabiro