it-swarm.com.de

Datatables-Warnung (Tabellen-ID = 'example'): Datentabelle kann nicht erneut initialisiert werden

Ich arbeite mit Datatables-Beispiel und erhalte beim Laden einer Seite eine solche Fehlermeldung: Datatables-Warnung (table id = 'example'): Datentabelle kann nicht erneut initialisiert werden . Um das DataTables-Objekt für diese Tabelle abzurufen, übergeben Sie keine Argumente oder sehen Sie sich die Dokumentation zu bRetrieve und bDestroy an.

Ich habe versucht, den FnRowCallback zu testen

<%@ 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>

Was mache ich falsch?

41
vjk

Sie initialisieren Datatables zweimal, warum?

// 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

Fügen Sie "bDestroy" hinzu: true für das Literal des Optionsobjekts, z.

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

Quelle: iodocs.com

oder Das erste entfernen:

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

In Ihrem Fall ist die beste Option vjk.

103
RckLN

Sie können die alte datatable auch mit dem folgenden Code löschen, bevor Sie die neue datatable erstellen:

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

Sie können der Konfiguration destroy:true hinzufügen, um sicherzustellen, dass die bereits vorhandene Datentabelle entfernt wird, bevor Sie sie erneut initialisieren.

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

Fügen Sie "bDestroy" hinzu: "true" in Ihrer Datentabelle. Wie: -

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

Es wird klappen.

9
Javed

Dieses Problem tritt auf, wenn wir dataTable mehr als einmal initialisieren. Dann müssen wir die vorherige entfernen.

Andererseits können wir die alte Datentabelle auf diese Weise auch vor dem Erstellen der neuen Datentabelle mit folgendem Code löschen:

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

Es gibt ein anderes Szenario: Angenommen, Sie senden mehr als eine Ajax-Anforderung, deren Antwort auf dieselbe Tabelle in derselben Vorlage zugreift. Dann wird auch ein Fehler angezeigt. In diesem Fall funktioniert die Methode "FnDestroy" nicht ordnungsgemäß, da Sie nicht wissen, welche Antwort zuerst kommt oder später. Dann müssen Sie bRetrieve TRUE in der Datentabellen-Konfiguration festlegen.

Das ist mein 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();

Machen Sie es zu einer Klasse, damit Sie mehrere Tabellen gleichzeitig instanziieren können

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

Erstes entfernen:

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

Sie müssen die Datentabelle zerstören und den Tabellenkörper leeren, bevor Sie DataTable binden.

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

In meinem Fall wurde der Ajax-Aufruf durch das Data-Plugin-Tag behindert, das auf die Tabelle angewendet wurde. Das Daten-Plugin führt eine Hintergrundinitialisierung durch und gibt diesen Fehler aus, wenn Sie dies ebenso wie yourTable.DataTable ({...}); Initialisierung. 

Von 

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

Zu

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