Jquery Datatable drag and drop a row from one tabl

Question

I am using jquery.dataTables.js and I'm trying to drag and drop rows from one table to another and vice-versa from table 2 to table1 like this sample: http://jsfiddle.net/yf47u/

Above sample was with json so I would like to make the same work with my json sample.

this is my jsfiddle:http://jsfiddle.net/f7debwj2/12/

html:

<br>
<br>
<h1>
 table1
</h1><br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>Order</th>
    </tr>
  </thead>
</table>

<br>
<br>
<h1>
 table 2
</h1><br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>

jquery:

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }]
  });
  table.rowReordering();

});


$(document).ready(function() {
  var dt = $('#example2').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
  var table = $('#example2').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'checkbox'
    }]
  });
  table.rowReordering();

});

$(document).ready(function() {
  $('body').on('mouseenter', 'input', function() {
    $('.btn').prop('disabled', true);
  });
  $('body').on('mouseout', 'input', function() {
    $('.btn').prop('disabled', false);
  });
});

Answer 1

Here is my solution to this problem based on your code. It's possible to drag and drop rows from one table to the other one, but I was compelled to change values of the FirstName column dynamically, because otherwise a table would consider two rows with an identical FirstName equal, which would be a problem when removing one of those identical rows. Generally, tables should have a unique key in such cases.

JavaScript:

    var rowCache;

    $(document).ready(function() {
        var dt = $('#example').dataTable();
        dt.fnDestroy();
    });     

    $(document).ready(function() {
        var dt = $('#example2').dataTable();
        dt.fnDestroy();
    });

    $(document).ready(function() {
        rowCache = [];

        var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
        var table = $('#example').DataTable({
            ajax: url,
            createdRow: function(row, data, dataIndex) {
              $(row).attr('id', 'row-' + dataIndex);
            },
            rowReorder: {
              dataSrc: 'order',
            },
            columns: [{
              data: 'order'
            }, {
              data: 'name'
            }, {
              data: 'place'
            }]
        });

        table.rowReordering();

        table.on('mousedown', 'tbody tr', function () {
            var $row = $(this);
            var r = table.rows(function (i, data) {
                return data.order == $row.children().first().text();
            });

            if (r[0].length > 1)
                r = r.rows(r[0][0]);    

            rowCache.push({ selector: 'example', row: r });
        });

        table.on('mouseup', mouseUp);
    });

    $(document).ready(function() {
      var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
      var table = $('#example2').DataTable({
        ajax: url,
        createdRow: function(row, data, dataIndex) {
          $(row).attr('id', 'row-' + dataIndex);
        },
        rowReorder: {
          dataSrc: 'order',
        },
        columns: [{
          data: 'order'
        }, {
          data: 'name'
        }, {
          data: 'checkbox'
        }]
      });
      table.rowReordering();

        table.on('mousedown', 'tbody tr', function () {
            var $row = $(this);
            var r = table.rows(function (i, data) {
                return data.order == $row.children().first().text();
            });

            if (r[0].length > 1)
                r = r.rows(r[0][0]);    

            rowCache.push({ selector: 'example2', row: r });
        });

        table.on('mouseup', mouseUp);
    });

    function mouseUp(event)
    {
        var id = $(document.elementsFromPoint(event.clientX, event.clientY))
            .filter('table')
            .attr('id');

        if (id && event.currentTarget.id != id)
        {
            rowCache.every(function (el, i) {
                if (el.selector != id)
                {                   
                    var data = el.row.data();

                    if (data.length > 0) {

                        if (!data[0].checkbox)
                            data[0].checkbox = "<input type='checkbox' />"

                        el.row.remove().draw();
                        var $target = $("#" + id).DataTable();

                        if ($target.rows()[0].length > 0)
                        {
                            var rowsArray = $target.rows().data().toArray();
                            data[0].order = rowsArray[rowsArray.length - 1].order + 1;
                        }
                        else
                            data[0].order = 1;

                        $target.rows.add(data.toArray()).draw();
                    }
                }}
            );
        }   

        rowCache = [];
    }

    $(document).ready(function() {
        $('body').on('mouseenter', 'input', function() {
            $('.btn').prop('disabled', true);
        });
        $('body').on('mouseout', 'input', function() {
            $('.btn').prop('disabled', false);
        });
    }); 

JSFiddle: http://jsfiddle.net/jahn08/f7debwj2/34/