JQuery - DataTables - Cant assign on() method during init

Viewed 42

Trying to setup re-order on my DataTable, but I dont want to have to assign it to a variable to do so. Not getting any errors, but not getting any console logs either (with the first method, second one I do get them).

Code that isnt working:

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

If I separate it, works fine, but want to assign the .on() during init as above.

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

You can chain it like so:

$("#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")});
Related