DataTables 警告：添加导出功能后无法重新初始化 DataTable

Question

尝试将数据表添加到我的 Sinatra 应用程序中。它具有导出内置于 JS 中的表格的功能。我可以运行它，但是要解决此行的错误。 Datatables Error

如何将这些额外的 JS 代码合并到我的 .DataTable 中？我不完全确定我需要把它放在哪里。这是当前引发错误的代码（抱歉，如果格式化关闭）：

$(document).ready(function() {
  $('#ma_pen_report').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
} );
} );
$(document).ready(function() {
  $('#ma_pen_report').DataTable( {
    initComplete: function () {
      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo( $(column.footer()).empty() )
          .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );
        column
          .search( val ? '^'+val+'$' : '', true, false )
          .draw();
        } );
      column.data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
    } );
  }
} );
} );

我想我只需要将 dom:&buttons: 数组插入到下一个代码块中，但我找不到如何执行此操作的示例。任何帮助都会很棒！

Answer 1

正如错误所说，问题是因为您将表初始化了两次 - 一次在第 2 行，一次在第 10 行。您也复制了 (document).ready(function()。要一次完成所有操作，请像这样：

$(document).ready(function() {
$('#ma_pen_report').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    initComplete: function() {
        this.api().columns().every(function() {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
            column.data().unique().sort().each(function(d, j) {
                select.append('<option value="' + d + '">' + d + '</option>');
            });
        });
    }
});

});