jquery - 数据表警告 : table id=DataTables_Table_1 - Cannot reinitialise DataTable. 不起作用

Question

数据表警告:

table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see 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
} );

希望对您有帮助。