数据表警告（表 id = 'example'）答案

【问题标题】：Datatables warning(table id = 'example')数据表警告（表 id = 'example'）
【发布时间】：2021-01-04 10:58:58
【问题描述】：

早上好，

我有一个关于 DataTables 的问题。

在教程中，我找到了一个可以“内联”编辑的表格。我想要德语的表格。

表格代码：

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

 var dataTable = $('#sample_data').DataTable({    
  "processing" : true,
  "serverSide" : true,
  "order" : [],
  "ajax" : {
   url:"fetch.php",
   type:"POST"
  }

 });

 $('#sample_data').on('draw.dt', function(){
  $('#sample_data').Tabledit({
   url:'action.php',
   dataType:'json',
   columns:{
    identifier : [0, 'id'],
    editable:[[1, 'nachname'], [2, 'vorname'], [3, 'datum', '{"1":"Male","2":"Female"}']]
   },
   restoreButton:false,
   onSuccess:function(data, textStatus, jqXHR)
   {
    if(data.action == 'delete')
    {
     $('#' + data.id).remove();
     $('#sample_data').DataTable().ajax.reload();
    }
   }
  });
 });


});
</script>

HTML-Code:
<html>
 <head>
  <title>How to use Tabledit plugin with jQuery Datatable in PHP Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h3 align="center">How to use Tabledit plugin with jQuery Datatable in PHP Ajax</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">Sample Data</div>
    <div class="panel-body">
     <div class="table-responsive">
      <table id="sample_data" class="table table-bordered table-striped">
       <thead>
        <tr>
         <th>ID</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Gender</th>
        </tr>
       </thead>
       <tbody></tbody>
      </table>
     </div>
    </div>
   </div>
  </div>
  <br />
  <br />
 </body>
</html>

德语语言设置代码：

$(document).ready( function () {
    $('#sample_data').DataTable({
    lengthMenu: [[25, 50, 100, 150, 200, 300, 400, 500], [25, 50, 100, 150, 200, 300, 400, 500]],
    dom: 'Bfrtip',
        buttons: [
        {
            extend: 'copy',
            text: '<i class="fa fa-clone" aria-hidden="true"></i> Kopieren',
        },
        {
            extend: 'print',
            text: '<i class="fa fa-print" aria-hidden="true"></i> Drucken'
        },
        {
            extend: 'excel',
            text: '<i class="fa fa-table" aria-hidden="true"></i> Excel'
        },
        {
            extend: 'pdf',
            text: '<i class="far fa-file-pdf"></i> PDF'
        }
    ],
    language: {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json",
            searchPlaceholder: "Suchbegriff eingeben...",
        }    
    } );    
} );

谁能帮帮我？不幸的是，我没有进一步了解。我得到了错误：

DataTables 警告：table id=sample_data - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3

【问题讨论】：

标签： javascript html jquery datatables

【解决方案1】：

如果您面临错误Cannot reinitialise DataTable，那么您应该在初始化 DataTable 之前销毁

var dataTable = undefined;
$(document).ready( function () {
    if(dataTable) dataTable.destroy();

    dataTable = $('#sample_data').DataTable({
    lengthMenu: [[25, 50, 100, 150, 200, 300, 400, 500], [25, 50, 100, 150, 200, 300, 400, 500]],
    dom: 'Bfrtip',
        buttons: [
        {
            extend: 'copy',
            text: '<i class="fa fa-clone" aria-hidden="true"></i> Kopieren',
        },
        {
            extend: 'print',
            text: '<i class="fa fa-print" aria-hidden="true"></i> Drucken'
        },
        {
            extend: 'excel',
            text: '<i class="fa fa-table" aria-hidden="true"></i> Excel'
        },
        {
            extend: 'pdf',
            text: '<i class="far fa-file-pdf"></i> PDF'
        }
    ],
    language: {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json",
            searchPlaceholder: "Suchbegriff eingeben...",
        }    
    } );    
} );

【讨论】：

非常感谢您的回答。我用你的代码替换了我的代码，但我也收到了同样的错误信息。 :(