Looking for a chance to find help for non-functional rowReordering in DataTables.

Vol.And

Long story short:
RowReordering doesn't work. I can drag the row up&down (I can see how it moves in chrome dev console), but by drop it flies back to its starting position. I've googled, read official Docs, read few topics here and by stackoverflow. It seems that my code is correct. This forum is my last hope.

table.php

<?php
     ...some server-side actions to get DB data... 
$json_array = json_encode($data);
?>

<table id="draggable" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Nr.</th>
            <th>Topic</th>
            <th>Answers</th>
        </tr>
        </thead>
    </table>
</div>
<script>
$(document).ready(function () {
let data_arr = <?php echo $json_array;?>;
        let table = $('#draggable').DataTable({
            data: data_arr,
            "paging": false,
            "searching": false,
            "ordering": true,
            "autoWidth": false,
            "info": true,
            createdRow: function (row, data, dataIndex) {
                $(row).attr('id', 'row-' + dataIndex);
            },
            rowReorder: {
                dataSrc: "nr"
            },
            "columns": [
                {"data": 'nr'},
                {"data": 'topic'},
                {"data": 'answers'}
            ],
            "columnDefs": [
                {"className": "dots", "targets": [1]},
                {"className": "table-30", "targets": [2]}
            ],
            "order": [[0, 'asc']]
        }).rowReordering();
 </script>

index.php

here just to show the sequence of links (if they are right):

<link href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"> 
</script>

any ideas why rowreordering doesn't work?

P.S. the data type and structure I send to DataTable is object. Prepared Table looks like this:

kthorngren

<script src="https://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js">

This looks to be a third party row reorder library. For support of this library you will need to contact the developer.

Or, a better option is to use the Datatables RowReorder extension.

Kevin

Vol.And

That is interesting point of view. I've commented out this line, but didn't find any CDN links for rowReorder, just this 2 :

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/rr-1.2.7/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/rr-1.2.7/datatables.min.js"></script>

so when I insert this 2, my index file will look like this:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/rr-1.2.7/datatables.min.css"/>

<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/rr-1.2.7/datatables.min.js"></script>

by this set of links I get a bunch of errors like not defined , not a function , etc and I can't move a thing or even no data in table presented, just thead.

Could you help me out with these links? I need jQuery ui, Datatable and rowReorder, do I?

kthorngren

You still need to include datatables.css and datatalbes.js, ie these lines:

<link href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet"/>
....
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

You might consider updating to the latest version Datatables version if you are going to use the RowReorder extension. You may also want to include the Datatables Bootstrap stying files.

The easiest way to get the proper files is to use the Download Builder.

Kevin

Vol.And

Thanks a lot! It did the job. I was struggling for couple of days to make it work. I thought that my code or data were wrong.

Now I have to download all the datatable lib files to úse it on my server.

Vol.And

that is strange, everything is functional, but I get these errors in console. Should I just ignore them, or should I fix them? Is it a CDN links ordering problem ?

kthorngren

That error is probably because you still have .rowReordering() on line 42 of your first code snippet. Remove that and it should eliminate the error.

Kevin

Vol.And

@kthorngren Thanks Kevin, it was a pleasure to chat with you, you helped me a lot.