Datatable on row-reorder data oldData and newData is undefined

Datatable on row-reorder data oldData and newData is undefined

Peter69Peter69 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'?

Answers

  • kthorngrenkthorngren Posts: 9,792Questions: 25Answers: 2,258

    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

  • Peter69Peter69 Posts: 5Questions: 1Answers: 0

    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" } }

  • colincolin Posts: 9,202Questions: 0Answers: 1,536

    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

  • Peter69Peter69 Posts: 5Questions: 1Answers: 0

    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).

  • colincolin Posts: 9,202Questions: 0Answers: 1,536

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

    Colin

  • Peter69Peter69 Posts: 5Questions: 1Answers: 0

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

  • Peter69Peter69 Posts: 5Questions: 1Answers: 0

    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.

Sign In or Register to comment.