数据表警告（表ID =“例如”）：不能重新初始化数据表(Datatables warning(tab

2019-07-04 12:53发布

站内文章 / 后端开发

24 0

混吃等死

女 | 书童

私信

我用数据表例如工作和加载页面时得到这样的错误：数据表警告（表ID =“示例”）：不能重新初始化数据表。要检索的DataTable对象此表，未传递参数或查看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:

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

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

尝试添加“bDestroy”：真正的选择对象常量，如

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

来源： iodocs.com

或删除第一 ：

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

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

Answer 3:

您也可以摧毁旧datatable使用下面的代码创建新前datatable ：

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

Answer 4:

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

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

Answer 5:

添加“bDestroy”：真实的在你的dataTable，如： -

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

它会工作。

Answer 6:

如果我们初始化的dataTable超过once.Then我们要删除以前出现此问题。

在另一方面，我们可以摧毁这样的老数据表也创造了新的DataTable使用下面的代码之前：

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

有一个另一种情况，假设你发送多个Ajax请求，响应将在同一个模板访问同一个表，然后我们会得到错误also.In这种情况下fnDestroy方法不能正常工作，因为你不知道哪个响应至上或later.Then你必须设置bRetrieve TRUE在数据表configuration.That的吧。

这是我的塞纳里奥：

<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:

在我的情况下，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 10:

你必须摧毁的数据表，并通过下面这样绑定的DataTable之前清空表身，

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

Answer 11:

寻找你的代码长线您最初创建排序的，看起来像表

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"]]

或添加什么，下面来改变选择框中选择的选项（只是确保它的值相匹配最初那里，或者如果添加上述行，它匹配在它的数字之一。

"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 12:

在我的情况

从

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

至

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

解决我的问题

文章来源: Datatables warning(table id = 'example'): cannot reinitialise data table

标签： jquery html datatables

混吃等死

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~