2

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 Answer 1

2

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")});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.