Reordering doesn't work

Reordering doesn't work

Ghost108Ghost108 Posts: 13Questions: 4Answers: 0

Hi !

I would like to create a table, where I can reorder the rows.
I unterstood, that I need a column with a sequence number to realize it.

This is my result:

And this is my code:

``` var tablePositionen = $('#tablePositionen').DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\€,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;

        // Total over this page
        pageTotal = api
            .column( 5, { page: 'current'} )
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 5 ).footer() ).html(
            +pageTotal + ".00 €"

    rowReorder: true,
    columnDefs: [
        { targets: 3, className: "text-center" },
        { targets: [4,5], className: "text-right" },
        { targets: 1, width: "5%" },
        { targets: 2, width: "50%" },
        { orderable: false, targets: 0, searchable: false },
        { orderable: false, targets: '_all' }
    "paging": false,
    "lengthMenu": [ [-1], ["All"] ],
    "language": {
        "url": ""

tablePositionen.on( 'order.dt', function () {
    tablePositionen.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

But the reordering doesn't work. I can drag and drop a row, but If I release the row on the new position, all rows stays on the old position. Where is my mistake?


  • kthorngrenkthorngren Posts: 14,559Questions: 25Answers: 3,458
    edited October 2021

    Without setting up a test case to confirm I would guess the problem is with using the order event to create the indexes. I suspect that it may run after dragging and dropping the rows reverting the indexes back. You can verify by using the browser's debugger or a console log statement in the event function. Try the init event instead to build the indexes once after initialization.


  • Ghost108Ghost108 Posts: 13Questions: 4Answers: 0

    I tried it but this doesn't work.
    the reordering problem is the same but the index numbers will now be remover after I drag a row

  • colincolin Posts: 13,234Questions: 0Answers: 2,260

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.



  • kthorngrenkthorngren Posts: 14,559Questions: 25Answers: 3,458

    The problem is the code section in line 39 is updating the DOM and not updating the Datatables data cache. You will need to use a Datatable API, like cell() instead of cell.innerHTML = i+1; to update the data cache. For example:


Sign In or Register to comment.