DataTables 警告:添加导出功能后无法重新初始化 DataTable
DataTables Warning: Cannot Reinitialise DataTable after adding Export Feature
正在尝试将数据表添加到我的 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: 数组插入到下一个代码块中,但我找不到如何执行此操作的示例。任何帮助都会很棒!
如错误所述,问题是因为您初始化了 table 两次 - 一次在第 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>');
});
});
}
});
});
正在尝试将数据表添加到我的 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: 数组插入到下一个代码块中,但我找不到如何执行此操作的示例。任何帮助都会很棒!
如错误所述,问题是因为您初始化了 table 两次 - 一次在第 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>');
});
});
}
});
});