Row dragged started but finally nothing changed

vbulash

My HTML table is:

<table class="table table-hover table-bordered table-vcenter w-100" id="fields_table">
    <thead>
        <tr>
            <th></th>
            <th>#</th>
            <th>Title</th>
        </tr>
    </thead>
</table>

Table init by JS code:

window.fields = $('#fields_table').DataTable({
    pageLength: 200,
    sorting: false,
    data: fields,
    layout: {
        topStart: null,
        topEnd: null,
        bottomStart: null,
        bottomEnd: null
    },
    rowReorder: {
        enable: true,
        dataSrc: 1,
        cancelable: true,
    },
    order: [
        [1, 'asc']
    ],
    columns: [{
            className: 'reorder',
            render: () => '≡',
            targets: 0,
            sortable: false,
        },
        {
            data: 'order_id',
            name: 'order_id',
            sortable: false,
        },
        {
            data: 'title',
            name: 'title',
            sortable: false,
        },
    ]
})

JS array fields contains objects with order_id and title.

When I press left mouse button, whole underlying table row dragged according to mouse moves.
When I release left mouse button - everything changed back to previous state.
How to make dragging changes persistent?

vbulash

Files included (Laravel blade syntax):

@push('css.header')
    <!-- Page JS Plugins CSS -->
    <link rel="stylesheet" href="{{ asset('js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/plugins/datatables-rowreorder/css/rowReorder.bootstrap5.min.css') }}">
@endpush

@push('js.header')
    <!-- jQuery (required for DataTables plugin) -->

    <!-- Page JS Plugins -->
    <script src="{{ asset('js/plugins/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('js/plugins/datatables-buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('js/plugins/datatables-buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js') }}"></script>
@endpush

kthorngren

Based on the code you posted rowReorder looks like it should work. Do the values in the order_id change after dropping the row? Can you post a simple test case using a sample from your data: fields, data to replicate the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

vbulash

Here is complete sample where my problem completely reproduced - https://codepen.io/vbulash/pen/zYLoyvv

vbulash

First - initial data
Second - try to drag second row to first one

vbulash

Found resolution!
rowReorder.dataSrc should be column data name - order_id in my case.
Number of orderable column is not acceptable here!