Possible bug with add/remove rows and nodes()

Trevor_Attwood

I was using an example posted to these forums of moving records between tables, which can be found here: https://jsbin.com/rujigaq/1/edit?html,css,js,output

Please perform the following:
1) From the top table, click the "checkbox" (first column) for each of the four rows whilst holding CTRL. All rows in the top table should now be selected.
2) Click on one of the highlighted rows and drag it to the first row of the bottom table, and release the mouse button. This should move all the (selected) rows from the top table to the bottom table.
3) In the bottom table, click each of the checkboxes in the 8 rows. Notice each row is highlighted correctly.

Now notice that inside the JavaScript function "HandleDrop()", it contains the line;
$('#' + dstTable).DataTable().rows.add(selectedRows.data()).draw();

As you can see, it uses the "data() function to get the data for each row to transfer. Note it will only get the actual field "values" and copy those, and hence strip out any CSS classes that are assigned. So, as an improvement, I tried changing the "data()" function, to nodes() which will select the "<tr>" html for the row, and have the effect of copying any CSS styling as well.

An example of my modified code is here: https://jsbin.com/pifomuvihe/edit?js,output
(Please use this code from now on)
Now, perform the same 3 steps as mentioned above (i.e. select each rows checkbox from the top table, and drag-drop all 4 highlighted rows to the bottom table).
Now, click the checkbox on each of the 8 rows in the bottom table. You should find that clicking the checkbox for the 3 of the rows with Names "Cedric Kelly", "Garret Winters", and "Tiger Nixon", highlight different rows than the row selected. Is this a bug with Datatables?

As a workaround, I tried adding a dummy record and immediately removing it to the bottom table. Please go to the JavaScript function "HandleDrop() and look for the commented line containing several X's. Below that are 2 commented-out lines, i.e.
/*
let newNode = $('#' + dstTable).DataTable().row.add(["", "zx", "zx", "zx", "zx", "zx", "zx"]).node();
$('#' + dstTable).DataTable().row(newNode).remove();
*/
Remove the comments from those 2 lines so those lines are enabled. Now, execute the code, and perform the same 3 steps as mentioned above. You should find that clicking the checkboxes on each of the 8 rows in the bottom table, now works correctly.

It seems that adding and removing a record (in particular, the "remove()" function) is doing something that corrects the table's clickable areas.