JQuery-DataTables-在初始化期间不能分配on()方法

Question

试图在我的DataTable上重新排序，但我不想把它分配给一个变量。没有得到任何错误，但也没有得到任何控制台日志(使用第一个方法，第二个方法我会得到它们(。

不起作用的代码：

$("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
}),$(this).on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
}), $(this).on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});

如果我将其分离，工作正常，但希望在初始化过程中如上所述分配.on((。

var rrtable = $("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
});
rrtable.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
});
rrtable.on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});

Answer 1

您可以这样链接它：

$("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
})
.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
})
.on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});