78

我正在使用数据表示例并在加载页面时收到这样的错误：数据表警告（表 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>

我在这做错了什么？

4

14 回答 14

170

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

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

资料来源：iodocs.com

或删除第一个：

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

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

于 2013-12-19T00:08:23.383 回答
65

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

$("#example").dataTable().fnDestroy();
于 2013-02-15T06:16:56.160 回答
41

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

// 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>' );
     }
   }
 } );
 } );
于 2012-12-04T17:44:29.440 回答
37

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

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

它会起作用的。

于 2017-12-01T11:15:57.490 回答
27

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

$('#example').dataTable({
    destroy: true,
    ...
});
于 2016-12-14T07:08:04.077 回答
14

在绑定 DataTable 之前，您必须销毁数据表并清空表体，方法如下：

function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
    $('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}
于 2019-03-26T13:46:51.083 回答
8 
$('#example').dataTable();

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

$('.example').dataTable();
于 2014-03-02T02:31:17.447 回答
8

如果我们多次初始化dataTable，就会出现这个问题。那么我们必须删除前一个。

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

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

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

这是我的情景：

<script type="text/javascript">

$(document).ready(function () {

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

        $('#DatatableOne').dataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": ["sorting_disabled"]
            }],
            "bDestroy": true
        }).fnDestroy();

});

</script>
于 2014-03-24T07:28:38.357 回答
2

删除第一个：

$(document).ready(function() {
    $('#example').dataTable();
} );
于 2012-12-04T17:44:35.793 回答
2

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

$('#example').dataTable({
    retrieve: true,
    ...
});
于 2021-07-07T15:32:13.837 回答
1

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

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

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

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

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

于 2019-11-28T08:42:52.320 回答
1

在你的代码中搜索可能你已经初始化了 dataTable 两次。你应该有这样的代码：

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

在您的代码中只有一次。

于 2020-05-20T12:38:39.067 回答
0

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

于 2020-08-28T08:34:59.030 回答
0

在我的情况下，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">
于 2018-07-04T09:30:17.480 回答