Anyone have an example Drag n Drop between Tables example?

timcadieux

I'm trying to narrow down an working example of copying data from one table onto another but there are just too many to sift through.

To be specific, what I want to do is have a table of files and a table of name with files.

If there are rows in the names with files that don't have a file, I just want to be able to drag and drop the filename from the files table onto the names with files table to fill in the missing filename.

Anyone have something similar like this that they could share please.

Thank you!!!

timcadieux

Really? No one has done this? If necessary I would pay a reasonable fee for a working solution.

allan

I've got a feeling it has been done - it has been asked before, but I don't recall there ever being a public example.

What you would need to do is either write or use a library that will clone the tr element from the source table, and present a drop zone in the second. Then you can use row().data() to get the data object from the original and row.add() to add it to the second.

Allan

timcadieux

I have managed to get this a part of the way along using Jquery-Ui, i'd appreciate some further input.

I am able to drag and drop a row from Table1 onto Table2.

issues

• When I drop the new row, it does appear on table2 but table2 collapses for some reason and I have to expand it to see the new row
• Table1 looks like the row was removed but if you use the Order arrow it reappears.

Additional Question...
I wish to push this new row of data into my db via ajax call...should I try to send the data at the end of the table2.droppable function or should I use some datatbles function in table2 to realise there is new data and then fire?

https://jsfiddle.net/rj1f6896/

allan

1) You are using $(c.tr).remove(); which removes the row immediately after adding it to table 1.

2) It sounds like row().remove() is not being used to remove it from table 1, and checking the fiddle that appears to be case (i.e. it is not being used).

3) In your drop callback you would not only use row.add() to add the row to the table, but also send an Ajax message to the server to say that the row has been added.

Another alternative, is if it is the same database table and its just a where condition to decide which table it appears in, you could send an edit command to the server and then reload the data for both tables.

Allan

timcadieux

I was having issues with the jquery-ui becuase I was ajaxing in the data I went with another solution. It alsu turns out my original requirement was wrong in that i need to overwrite only a single Cell.

Here's a working fiddle
https://jsfiddle.net/hqjtgmec/