DataTable works in mysterious ways ...

marius.gerum

Hey guys,

i'm having some trouble with this datatable plugin and it's really driving me insane - sitting here and searching for hours just for a (as i think) simple solution.

• I have a simple table with trs and tds - cool.
• The first cell in every row should initiate the row reordering. This only works when the cell contains a unique value - wtf is this shit?

This is my PHP/HTML code:

<?php
    
    
    echo "<table class=\"table table-striped table-bordered table-hover\" id=\"PositionsTable\">";
    
    # table rows are generated in a foreach loop
    echo "<tr id='PositionRow" . $PositionCount . "' class='row-" . $PositionCount . "'>";
    
    echo "<td id='TDReorder" . $PositionCount . "' class='text-center va-middle reorder' style='cursor: move;'>";
    echo "<i class='fa fa-bars'></i> [ XXXX ]";
    echo "<input type='hidden' name='pos[]' value='" . $row['id'] . "'>";
    echo "</td>";
    echo "<td class='text-center va-middle'><input type='checkbox' name='posid'></td>";
    
    echo "</tr>";
    # loop ends here
    
    echo "</table>";



<?php
>
```
?>


JavaScript code:

var table = jQuery('#PositionsTable').DataTable({
"rowReorder": {
snapX: 0,
selector: 'tr td.reorder'
},
paging: false,
columnDefs: [
{ orderable: false, targets: '_all' }
]

            });

```

You see the "[ XXXX ]" in line 10 (PHP/HTML code)? If i replace this with a unique text, everything works fine. If i don't change this code, nothing happens and after drag-end event (mousebutton goes up) the row jumps back to its place.

Second issue is that (when a unique text was entered) everything works, but the values in the first cell (the "drag-my-row-cell") are not reordering.

This is my first success-experience after hours of research, i had tons of different mysterious behaviors on my way to the current result which i could not even explain because it absolutely makes no sense.

Please enlighten me. I'm feeling like a dumb piece of shit and this really fucks my brain.

marius.gerum

Anyone who can help here?

allan

RowReorder is not a DOM swap library - it does not just reorder the DOM element. Instead it does a data swap. I.e. it will actually change the values based on the reordering position. You need to use rowReorder.dataSrc to tell it what data property you want to swap.

Allan