Reordering doesn't work

Ghost108

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'} )
            .data()
            .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": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
    }
});

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?

kthorngren

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.

Kevin

Ghost108

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

colin

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.

Cheers,

Colin

kthorngren

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:
http://live.datatables.net/pehubogi/1/edit

Kevin