Question

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

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

我在这做错了什么？

Answer 1

尝试将“bDestroy”：true添加到选项对象文字中，例如

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

来源：iodocs.com

或删除第一个：

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

在您的情况下，最好的选择 vjk 。

Answer 2

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

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

Answer 3

您要初始化数据表两次，为什么？

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

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

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

Answer 5

在dataTable中添加“bDestroy”：true，如： -

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

它会起作用。

Answer 6

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

另一方面，我们也可以在创建新数据表之前以这种方式销毁旧数据表，使用以下代码：

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

还有另一个场景，比如你发送了多个ajax请求，哪个响应会在同一个模板中访问同一个表，然后我们也会收到错误。在这种情况下，fnDestroy方法无法正常工作，因为你不知道哪个响应是先来还是后来。然后你必须在数据表配置中设置bRetrieve TRUE。就是这样。

这是我的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

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

使它成为一个类，这样你就可以一次实例化多个表

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

Answer 8

删除第一个：

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

Answer 9

我知道这是一个老问题。如果您尝试重新初始化数据表，则可以很容易地重现此问题。

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

可以轻松解决此问题。请按照步骤

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

JSFiddle代码还附有相同代码http://jsfiddle.net/vibs2006/qxy4nwfg/

的任何引用

Answer 10

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

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

Answer 11

在我的情况下，ajax调用受到应用于表的数据插件标记的干扰。数据插件会进行后台初始化，并且在您拥有它以及yourTable.DataTable（{...}）时会出现此错误。初始化。

来自

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

收件人

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

Answer 12

在绑定DataTable之前，您必须通过执行以下操作来破坏数据表并清空表主体，

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

Answer 13

在您的代码中搜索，也许您已在代码中两次初始化了dataTable。您持有这样的代码：

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

在您的代码中只有一次。

Answer 14

搜索此主题时，我在其他地方找到了解决方案，但在此处添加了答案，因为我遇到了与上述相同的问题以及文本“未捕获的TypeError：无法设置未定义的属性'_DT_CellIndex'”。原因是由于表主体中有一对多的标签。

Answer 15

在代码中查找最初创建表格的长行

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

然后将以下内容添加到上面的行中以更改选择框中的选项

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

或添加以下内容以更改选择框中的所选选项（只需确保它与最初的值匹配，或者如果您添加了上述行，则表示它与其中的一个数字匹配。< / p>

"iDisplayLength": 60

添加上述两个选项的最终结果与上面首次粘贴的初始代码相似：

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

Answer 16

就我而言

发件人

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

要

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

解决了我的问题

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

16 个答案: