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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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?

Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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

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

Questions:
Answers:
$('#example').dataTable();

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

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

Questions:
Answers:

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>

Questions:
Answers:

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

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

Questions:
Answers:

Remove the first:

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

Questions:
Answers:

Look for a long line in your code where you initially create the table that sort of looks like

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

then add the following to the above line to change the options in the select box

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

or add what’s below to change the selected option in the select box (just make sure it matches a value initially there, or if you added the above line, that it matches one of the numbers in it.

"iDisplayLength": 60

the end result with both of the above options added looks like this when with initial code I pasted first above:

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

Questions:
Answers:

In my case

From

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

To

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

Solved my problem