vjk
vjk

Reputation: 2283

Datatables warning(table id = 'example'): cannot reinitialise data table

I am working with datatables example and getting an error like this when loading page: Datatables warning(table id = 'example'): cannot reinitialise data table. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.

I was trying to test the 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>

What am i doing wrong in this?

Upvotes: 100

Views: 397247

Answers (14)

SUDHIR KUMAR
SUDHIR KUMAR

Reputation: 419

https://datatables.net/reference/option/retrieve

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

Upvotes: 8

Zahra Badri
Zahra Badri

Reputation: 2034

Search in your code maybe you have initialized dataTable twice. You shold have like this code:

$('#example').dataTable( {paging: false} );

Only one time in your code.

Upvotes: 1

Michael
Michael

Reputation: 19

When searching this topic I found the solution elsewhere but adding the answer here since I had the same problem as above together with the text "Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined". Cause was due to having one to many tags in the table body.

Upvotes: 0

vibs2006
vibs2006

Reputation: 6538

I know its an old question. This problem can be easily reproduced if you try to reinitialize the Datatable again.

For example in your function somewhere you are calling $('#example').DataTable( { searching: false} ); again.

There is easy resolving this issue. Please follow the steps

  1. Initialize the Datatable to a variable rather than directly initializing DataTable method.
    1. For Example Instead of calling $('#example').DataTable( { searching: false} ); try to declare it globally (or in scope of javascription that you are using) like this var table = $('#example').DataTable( { searching: false } );.
  2. Now Whenever you are calling this method $('#example').DataTable( { searching: false} ); again then before calling it perform the following actions
    1. if (table != undefined && table != null) { table.destroy(); table = null; }
  3. Once you have followed the steps above then go ahead with re-initializing the table with same variable without using var keyword (as you have already defined it) i.e table = $('#example').DataTable( { searching: false } );

JSFiddle Code Also attached for any reference of same code http://jsfiddle.net/vibs2006/qxy4nwfg/

Upvotes: 2

KIshorekumar SP
KIshorekumar SP

Reputation: 323

You have to destroy the datatable and empty the table body before binding DataTable by doing this below,

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

Upvotes: 18

aabiro
aabiro

Reputation: 4248

In my case the ajax call was being interfered by the data-plugin tag applied to the table. The data-plugin does background initialization and will give this error when you have it as well as yourTable.DataTable({ ... }); initialization.

From

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

To

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

Upvotes: 0

Javed
Javed

Reputation: 1753

Add "bDestroy": true in your dataTable Like:-

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

It Will Work.

Upvotes: 49

RckLN
RckLN

Reputation: 4484

Try adding "bDestroy": true to the options object literal, e.g.

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

Source: iodocs.com

or Remove the first:

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

In your case is the best option vjk.

Upvotes: 207

Kent Aguilar
Kent Aguilar

Reputation: 5348

You can add destroy:true to the configuration to make sure data table already present is removed before being reinitialized.

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

Upvotes: 31

Soma Sarkar
Soma Sarkar

Reputation: 866

You can also destroy the old datatable by using the following code before creating the new datatable:

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

Upvotes: 75

Rajeshkumar Kandhasamy
Rajeshkumar Kandhasamy

Reputation: 6461

This problem occurs if we initialize dataTable more than once.Then we have to remove the previous.

On the other hand we can destroy the old datatable in this way also before creating the new datatable use the following code :

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

There is an another scenario ,say you send more than one ajax request which response will access same table in same template then we will get error also.In this case fnDestroy method doesn’t work properly because you don’t know which response comes first or later.Then you have to set bRetrieve TRUE in data table configuration.That’s it.

This is My 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>

Upvotes: 10

Pabsy
Pabsy

Reputation: 89

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

Make it a class so you can instantiate multiple table at a time

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

Upvotes: 8

KingKongFrog
KingKongFrog

Reputation: 14419

Remove the first:

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

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You are initializing datatables twice, why?

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

Upvotes: 42

Related Questions