Datatables warning(table id = 'example'):

2019-01-16 11:51发布

站内文章 / jQuery
46 0 0

问题:

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?

回答1:

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


回答2:

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.



回答3:

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

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


回答4:

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

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


回答5:

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

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

It Will Work.



回答6:

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>


回答7:

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

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

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


回答8:

Remove the first:

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


回答9:

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


回答10:

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


回答11:

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



标签： jquery html datatables
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~