Reordering doesn't work
Reordering doesn't work
Ghost108
Posts: 19Questions: 7Answers: 0
in DataTables
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?
Answers
Without setting up a test case to confirm I would guess the problem is with using the
orderevent 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 theinitevent instead to build the indexes once after initialization.Kevin
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
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
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 ofcell.innerHTML = i+1;to update the data cache. For example:http://live.datatables.net/pehubogi/1/edit
Kevin