数据表不会为按钮创建新行

Question

我正在努力实现这一点：https://datatables.net/extensions/buttons/examples/initialisation/multiple.html

每当我运行此代码时，它都会告诉我"表未定义"。。。

<script>
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.owner+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}

$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' },
{"className": "btn btn-info btn-fill move", "text":"New Vendor", "action":function(e, dt, node, config){window.location.replace("new.php"); }
}],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class":          "details-control",
"orderable":      false,
"data":           null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "dept" },

],  "order": [[1, 'asc']],

} );
new $.fn.dataTable.Buttons( table, {
buttons: [
{
text: 'Button 2',
action: function ( e, dt, node, conf ) {
alert( 'Button 2 clicked on' );
}
},
{
text: 'Button 3',
action: function ( e, dt, node, conf ) {
alert( 'Button 3 clicked on' );
}
}
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
table.buttons( 1, null ).container().appendTo(
table.table().container()
);
} );
</script>

我确保我已经加载了所有的脚本，但唯一出现的一行是最上面的一行，而不是应该出现在底部的新一行。我希望有人能很快指出我犯的一个错误。我已经盯着这个看了一段时间了，所以如果它是一个小东西，我不会感到惊讶。

Answer 1

如果它给出的表是未定义的，那么我注意到您已经创建了一个数据表并将其存储到dt变量中，并且您正在访问tablevariable

1(table.buttons

2(new $.fn.dataTable.Buttons( table, {**

因此，在代码中的所有位置都用dt替换表变量。

更新的

1(dt.buttons

2(new $.fn.dataTable.Buttons(dt,

如果你仍然面临这些问题，请告诉我。

Answer 2

更改此行

table.buttons( 1, null ).container().appendTo(
table.table().container()
);

至

dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);```