jQuery 数据表警告（表 id = 'example'）：无法重新初始化数据表

Question

提问by vjk

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.

我正在使用数据表示例并在加载页面时收到这样的错误：数据表警告（表 ID = '示例'）：无法重新初始化数据表。要检索此表的 DataTables 对象，请不要传递任何参数或查看 bRetrieve 和 bDestroy 的文档。

I was trying to test the fnRowCallback

我试图测试 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?

我在这做错了什么？

Answer 1

采纳答案by Nicola Peluchetti

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

Answer 2

回答by RckLN

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

尝试将 "bDestroy": true 添加到选项对象文字中，例如

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

Source: iodocs.com

资料来源：iodocs.com

or Remove the first:

或删除第一个：

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

In your case is the best option vjk.

在你的情况下是最好的选择vjk。

Answer 3

回答by Soma Sarkar

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

您还可以datatable在创建新的之前使用以下代码销毁旧的datatable：

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

Answer 4

回答by Javed

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

在您的数据表中添加 "bDestroy": true 像：-

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

It Will Work.

它会起作用。

Answer 5

回答by Kent Aguilar

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

您可以添加destroy:true到配置以确保在重新初始化之前删除已经存在的数据表。

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

Answer 6

回答by RajeshKdev

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

如果我们多次初始化dataTable，就会出现这个问题。然后我们必须删除之前的。

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 TRUEin data table configuration.That's it.

还有另一种情况，假设您发送多个 ajax 请求，哪个响应将访问同一个模板中的同一个表，那么我们也会得到错误。在这种情况下，fnDestroy 方法无法正常工作，因为您不知道哪个响应首先出现或者稍后。然后你必须bRetrieve TRUE在数据表配置中进行设置。就这样。

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>

Answer 7

回答by Pabsy

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

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

使它成为一个类，以便您可以一次实例化多个表

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

Answer 8

回答by KIshorekumar SP

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

在绑定 DataTable 之前，您必须通过以下操作销毁数据表并清空表体，

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

Answer 9

回答by KingKongFrog

Remove the first:

删除第一个：

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

Answer 10

回答by vibs2006

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.

例如，在您$('#example').DataTable( { searching: false} );再次调用的某个地方的函数中。

There is easy resolving this issue. Please follow the steps

解决这个问题很容易。请按照步骤

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 } );.
Now Whenever you are calling this method $('#example').DataTable( { searching: false} );againthen before calling it perform the following actions
1. if (table != undefined && table != null) { table.destroy(); table = null; }
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 } );

将 Datatable 初始化为变量而不是直接初始化 DataTable 方法。
1. 例如，不要$('#example').DataTable( { searching: false} );像这样调用尝试在全局范围内（或在您正在使用的 javascription 范围内）声明它var table = $('#example').DataTable( { searching: false } );。
现在，无论何时$('#example').DataTable( { searching: false} );再次调用此方法，然后在调用它之前执行以下操作
1. if (table != undefined && table != null) { table.destroy(); table = null; }
一旦你按照上面的步骤，然后继续使用相同的变量重新初始化表而不使用 var 关键字（因为你已经定义了它）即table = $('#example').DataTable( { searching: false } );

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

JSFiddle 代码也附上相同代码的任何参考http://jsfiddle.net/vibs2006/qxy4nwfg/

jQuery 数据表警告（表 id = 'example'）：无法重新初始化数据表

提问by vjk

采纳答案by Nicola Peluchetti

回答by RckLN

回答by Soma Sarkar

回答by Javed

回答by Kent Aguilar

回答by RajeshKdev

回答by Pabsy

回答by KIshorekumar SP

回答by KingKongFrog

回答by vibs2006

相关推荐

最近更新

标签

jQuery 数据表警告（表 id = 'example'）：无法重新初始化数据表

提问by vjk

采纳答案by Nicola Peluchetti

回答by RckLN

回答by Soma Sarkar

回答by Javed

回答by Kent Aguilar

回答by RajeshKdev

回答by Pabsy

回答by KIshorekumar SP

回答by KingKongFrog

回答by vibs2006

相关推荐

悬停时的动画不透明度（jQuery）

在 jquery 中对最终输出进行四舍五入

jQuery：单击一次按钮，单击事件触发两次或更多次

jQuery 如何使用数据表和服务器端处理进行自定义过滤

相关推荐

最近更新

标签