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")});