Datatable on row-reorder data oldData and newData is undefined

Peter69

I am currently rewriting my datatable from CodeIgniter (datatables v1.10.12 and RowReorder v1.1.2) to Laravel 6 (datatables v1.10.20 and RowReorder v1.2.6). On the event 'row-reorder' i need to collect data about the changes. Therefore i use this script.

$('#category-table').on('row-reorder.dt', function (dragEvent, data, nodes) {
    var newSequences = [];

    $.each(data, function(key, change) {
        console.log(change);
        newSequences.push({
            id:         $(change.oldData).data('id'),
            sequence:   $(change.newData).data('sequence')
        });
    });

    doThingsWithTheResult(newSequences);
}

In the old situation (CodeIgniter) 'change.oldData' and 'change.newData' are filled with the old and new elements that are affected by the 'row-reorder' event but in the new situation (Laravel) both 'change.oldData' and 'change.newData' are 'undefined'.

Old/working situation

New/ not working situation

What could be the reason why these crucial properties are 'undefined'?

kthorngren

My guess is you are using columns.defautlContent or columns.render to display the span element. Did this column configuration change when moving from CodeIgniter to Laravel?

Where do you get the data for data-id? If its part of the row data then maybe you can use columns.data to assign it to that column then use columns.render for the display operation to display the span element.

Kevin

Peter69

Thanks for your reply but unfortunatly it could not help me.
Hereby the (relevant part) of the configuration

window.LaravelDataTables["category-table"]=$("#category-table").DataTable({ "serverSide":true, "processing":true, "ajax":{ "url":"", "type":"GET", "data":function(data) { for (var i = 0, len = data.columns.length; i < len; i++) { if (!data.columns[i].search.value) delete data.columns[i].search; if (data.columns[i].searchable === true) delete data.columns[i].searchable; if (data.columns[i].orderable === true) delete data.columns[i].orderable; if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name; } delete data.search.regex; } }, "columns":[ { "data":"sequence", "name":"sequence", "title":"<span class=\"fa fa-arrows-v\">", "orderable":false, "searchable":false, "width":10 }, { "data":"name", "name":"name", "title":"Name", "orderable":true, "searchable":true } ], "colReorder":true, "rowReorder":{ "enable":true, "update":false }, "pageLength":25, "order":[ [0,"asc"] ] });

And ajax response

{ "draw":1, "recordsTotal":3, "recordsFiltered":3, "data":[{ "sequence":"<span class=\"datatables-rowreorder-handle fa\" data-id=\"9\" data-sequence=\"1\"><\/span>", "name":"One record" },{ "sequence":"<span class=\"datatables-rowreorder-handle fa\" data-id=\"11\" data-sequence=\"2\"><\/span>", "name":"One more record" },{ "sequence":"<span class=\"datatables-rowreorder-handle fa\" data-id=\"12\" data-sequence=\"5\"><\/span>", "name":"Another record" } ], "input":{ "draw":"1", "columns":[{ "data":"sequence", "name":"sequence", "searchable":"false", "orderable":"false", "search":{ "value":null, "regex":"false" } },{ "data":"name", "name":"name", "searchable":"true", "orderable":"true", "search":{ "value":null, "regex":"false" } }], "order":[{ "column":"0", "dir":"asc" }], "start":"0", "length":"25", "search":{ "value":null, "regex":"false" }, "_":"1586240995561" } }

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

Peter69

On this webpage there's an example of this problem. After a row-reorder a console.log wil be triggered. When you look at de contents of this log you will see that oldData and newData are both 'undefined' while i expect these properties to be filled with the (old and new) contents of the row-reorder handle (1st column).

colin

That page isn't loading, I'm afraid. It's giving a 404 error from the server. Can you take a look, please.

Colin

Peter69

I see no reason that this page isn't loading.
I can even load it by using the tor browser.

Peter69

Problem solved!

Although it worked out-of-the-box in the old situation in de new situation i needed to add/provide the rowReorder.dataSrc setting.