DataTables 警告：table id=DataTables_Table_1 - 无法重新初始化 DataTable。不工作

Question

数据表警告：

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

我的代码是

  this.dtOptions = {
    pagingType: 'full_numbers',
    scrollX: true,
    lengthChange: false,
    pageLength: 100
  };

我的数据表标签是

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"  class="display nowrap" cellspacing="0" width="100%" >

当我在数据表中打印我的数据时，我使用 angular 4 和数据表，仅显示第一个字符而不显示完整的动态值。我该如何添加解决这个问题？

我正在使用这个数据表https://l-lin.github.io/angular-datatables/#/getting-started

我添加了我的数据表结果动态数据的示例图像。当我使用一些静态数据时工作正常。仅适用于动态数据

Answer 1

DataTables 具有广泛的配置选项，可用于在初始化时自定义表格，但仅限于初始化时。初始化 DataTable 后，任何尝试使用这些选项都会导致错误。

含义

简单地说，DataTables 不允许在初始化时以外的任何时间更改初始化选项。初始化后对表的任何操作都必须通过 API 完成，并且在表已经初始化后尝试设置初始化选项将导致错误

当所选节点的 DataTable 实例已经初始化时，通过将选项传递给 DataTables 构造函数对象会触发此错误。例如：

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


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

在运行第二个代码块时将导致错误，因为#example 已经初始化为 DataTable。

分辨率

在代码中出现此错误的方式有很多种，因此也有多种不同的方法可用于解决此问题，具体取决于您要达到的目标。

单一初始化

如果您想使用多个 DataTables 初始化选项，只需将它们一起应用到表中即可。在上面的示例错误中，我们尝试禁用分页和搜索，我们将使用：

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

对象实例检索

if ( $.fn.dataTable.isDataTable( '#example' ) ) {
    table = $('#example').DataTable();
}
else {
    table = $('#example').DataTable( {
        paging: false
    } );
}

检索

table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

摧毁

table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );

希望对你有所帮助。