move rows between two datatables

Question

So here's the thing, I have two datatables side by side and I nedd to add items(rows) from Table A to Table B.

'Before' datatable I was doing all right using append:

function add(num)
{
      ...
      $("#myDiv1 tr#p"+num).appendTo("#myDiv2");
      ...
}

Of course this doesn't work with datatables since does not update the table, and I can't seem to get It working using datatables functions, my code goes like the following but isn't working at all:

function add()
{
       ...
       stockTable = $('#stocktable').dataTable();
       catalogTable = $('#catalogtable').dataTable();
       var trdata = stockTable.fnGetData($(this).closest('tr'));
       stockTable.fnDeleteRow($(this).closest('tr'));
       catalogtable.fnAddData(trdata);
       ...
}

Help appreciated!

davidkonrad · Accepted Answer · 2015-05-15 08:20:16Z

16

It is unclear exactly what is not working, but here is a working example :

stockTable.on('click', 'tbody tr' ,function() {
   var $row = $(this);
   var addRow = stockTable.fnGetData(this);
   catalogTable.fnAddData(addRow);
   stockTable.fnDeleteRow($row.index());
});

demo -> http://jsfiddle.net/AgB38/

Update. The above answer was targeting dataTables 1.9.x. Below is the same answer targeting dataTables 1.10.x, using the new API.

stockTable.on('click', 'tbody tr' ,function() {
    var $row = $(this);
    var addRow = stockTable.row($row);
    catalogTable.row.add(addRow.data()).draw();
    addRow.remove().draw();
});

demo -> http://jsfiddle.net/4cf43tv1/

edited May 15, 2015 at 8:20

answered Nov 15, 2013 at 15:20

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chrishow Over a year ago

Damn GENIUS. EXACTLY what I needed. Apparently I had no clue of what I was doing, no it seems so clear... Thanks a lot man.

Chrishow Over a year ago

davidkonrad, although your code is a lifesaver there's a glitch somewhere, I changed it to move the rows back and forth by clicking a button but "sometimes" it sends the wrong tr, can you help me? Thanks in advance.

Robula Over a year ago

v1.10 doesn't appear have any of these fn**** functions. Nothing mentioned in the documentation either :(

Rob85 Over a year ago

can this be changed to drag and drop instead of click

SK.02 · Accepted Answer · 2022-02-09 04:22:39Z

1

if table rows has custom css styles you can use row().node instead row().data() to copy classes and other attributes

         btpick.click(function() {
            table1.rows({
                selected: true
            }).every(function() {
                table2.row.add(this.node());
            }).remove();
            table1.draw();
            table2.draw();
         });

and here a function to move all rows

         btpickall.click(function() {
            tqable2.rows.add(table1.rows().nodes()).draw();
            table1.clear();
         });

edited Feb 9, 2022 at 4:22

answered Feb 9, 2022 at 3:58

SK.02

112 bronze badges

Collectives™ on Stack Overflow

move rows between two datatables

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related