Datatable on row-reorder data oldData and newData is undefined
Datatable on row-reorder data oldData and newData is undefined
Peter69
Posts: 5Questions: 1Answers: 0
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'?
This discussion has been closed.
Answers
My guess is you are using
columns.defautlContentorcolumns.renderto display thespanelement. 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 usecolumns.datato assign it to that column then usecolumns.renderfor thedisplayoperation to display thespanelement.Kevin
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"}}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
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).
That page isn't loading, I'm afraid. It's giving a 404 error from the server. Can you take a look, please.
Colin
I see no reason that this page isn't loading.
I can even load it by using the tor browser.
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.