logo标签列表

Datatables警告（表格ID='example'）：无法重新初始化数据表。

jqueryhtmldatatables
92

我正在使用Datatables示例，并在加载页面时遇到以下错误： Datatables警告（表格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>

我在这里做错了什么？

我因为两次使用 $( '#example' ).dataTable() 而遇到了这个错误。当我删除其中一个时，错误消失了。 - Chalist
14个回答
200

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

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

来源：iodocs.com

或删除第一个：

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

对于你的情况，最好的选择是vjk。

4
需要注意的是，尽管这可以解决问题，但并没有解决原始问题，即Datatables的不必要重复初始化。 - Felipe Leão
这将停止进一步的执行，例如排序。 - bareMetal
73

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

$("#example").dataTable().fnDestroy();
49
在您的dataTable中添加 "bDestroy": true，如下所示：
   $('#example').dataTable({
    ....
    stateSave: true,
    "bDestroy": true
    });

它会起作用。

谢谢分享这个。对我来说非常有效。太棒了。 - Umar Niazi
正是我所需要的。昨天我一整天都在苦苦挣扎这个问题。你救了我的命。谢谢。 - Roly
双倍棒极了 :) - Harish Kumar
42

您为什么要初始化 datatables 两次？

// 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>' );
     }
   }
 } );
 } );
谢谢。在React中对我有用。 - chobela
30

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

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

在绑定DataTable之前，您需要销毁datatable并清空表格内容，方法如下：

function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
    $('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}
10
如果我们多次初始化DataTable，则会出现此问题。然后我们必须删除先前的DataTable。
另一方面，我们也可以通过以下代码销毁旧的DataTable，在创建新的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>
我参考了这里。 - RajeshKdev
1
谢谢伙计，非常有帮助。 - mukesh krishnan
你的场景对我起作用了！ - Aslam Kakkove
8
$('#example').dataTable();

将其定义为一个类，这样您就可以一次实例化多个表。
$('.example').dataTable();
在其他情况下，+1也可以工作：）。我不知道为什么在我的情况下它不起作用。:( - RajeshKdev
6
2

删除第一个：

$(document).ready(function() {
    $('#example').dataTable();
} );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接