rowReorder.enable() seems to no work

psaid

I have this datatable:

$('#my-table').dataTable({
                    pagingType: "full_numbers",
                    pageLength: 5,
                    lengthMenu: [[5, 10, 20], [5, 10, 20]],
                    autoWidth: false,
                    responsive: true,
                    stateSave: true,
                    deferRender: true,
                    buttons: [
                        { extend: 'colvis', className: 'btn btn-square btn-sm btn-primary', text: '<i class="fa fa-columns"></i>', columns: ':not(.fixed)', background: false },
                        { extend: 'copy', className: 'btn btn-square btn-sm btn-primary', text: '<i class="far fa-file"></i>', exportOptions: { columns: ':visible :not(.no-export)' } },
                        { extend: 'excel', className: 'btn btn-square btn-sm btn-primary', text: '<i class="far fa-file-excel"></i>', exportOptions: { columns: ':visible :not(.no-export)' } },
                        { extend: 'print', className: 'btn btn-square btn-sm btn-primary', text: '<i class="fa fa-print"></i>', exportOptions: { columns: ':visible :not(.no-export)' } },
                        { extend: 'pdf', className: 'btn btn-square btn-sm btn-primary', text: '<i class="far fa-file-pdf"></i>', exportOptions: { columns: ':visible :not(.no-export)' } }
                    ],
                    language: {
                        url: "/build/i18n/datatables/" + $('html').attr('lang') + ".json"
                    },
                    dom: "<'row'<'col-xs-12 col-sm-4 col-md-4 col-lg-4'l><'col'f><'col-auto'B>r><'row'<'col-xs-12 col-sm-12 col-md-12't>><'row'<'col-xs-12 col-sm-12 col-md-5'i><'col-xs-12 col-sm-12 col-md-7'p>>",
                    initComplete: function(settings, json) {
                        console.log('Datatables Init Complete [ID: ' + $id + ']');
                    },
                    order: [],
                    columnDefs: [{
                        targets: 'no-sort',
                        orderable: false
                    }, {
                        targets: 'width50',
                        width: '50px'
                    }, {
                        targets: 'no-visible',
                        visible: false
                    }, {
                        targets: 0,
                        orderable: true
                    }]
                });

The datatable works.
But if i try this...

$(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#my-table')) {
                let $table = $('#my-table').DataTable();
                $table.rowReorder.enable();
                
                console.log($table);
                
                $table.on('row-reorder', function (e, diff, edit) {
                    let result = 'Reorder started on row: ' + edit.triggerRow.data()[1] + '<br>';

                    for (var i = 0, ien = diff.length; i < ien; i++) {
                        let rowData = $table.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:<br>' + result);
                });
            }
        });

The rowReorder is not enbled...
If i use "rowReorder: true" in options in creation of datatable this works.

What am I doing wrong to make "rowReorder.enable()" not work?

kthorngren

It looks like you need to apply RowReorder to the table through the initialization options. You can set rowReorder.enable to false to initially disable then use rowReorder.enable() to enable at a later time. For example:
https://live.datatables.net/cayonaba/1/edit

Kevin