Jquery Datatable drag and drop a column from one table to another

Question

I am using: jquery.dataTables.js from: https://datatables.net

I am trying to drag and drop a column from one table to another.

EDIT: so basically what I want to do is:

• be able to drag and drop the names from table 2 into column called name in the table above
• after drag and drop the name the same should disappear from the table 2.

case 2: if I add a new row using the button Add new Row

• I need be able to drag a drop the names from table 2 into that column name too.

so basically I want to do a drag and drop just in the column not in the row.

I don't want create a new row just move the names from 1 table to another.

EDIT 2:

1- Can you drag/drop multiples values from Table #2 to Table #1? no, the drag and drop will be possible just 1 by 1. The drag and drop will be just possible after the user clicks in edit or add a new row. so I will be able to replace names drom table 2 into the column names table 1

2- If no, the value dragged shall then replace the value where it is dropped? yes

3- If yes,how should it work? Adding new rows with the other values blank? no row need be added, we just need replace the column name.

how will works: so after click in edit or add new row i will be able to drag a name from table 2 into column in table 1.

few more resquests: if select the row in table 2, this row should be change the color, showing was selected. and in the table 1 column name where this need be dropped need to change the color to show the user can be dropped, after the user drop the color should back to normal.

sample working here: http://plnkr.co/edit/6sbmBzbXDzm4p6CjaVK0?p=preview

  $(document).ready(function() { var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2'; var options = [ { key : 'option 1', value : 1 }, { key : 'option 2', value : 2 }, { key : 'option 3', value : 3 } ]; $(document).ready(function() { var $table = $('#example'); var dataTable = null; $table.on('mousedown', 'td .fa.fa-minus-square', function(e) { dataTable.row($(this).closest("tr")).remove().draw(); }); $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) { enableRowEdit($(this)); }); $table.on('mousedown', 'input', function(e) { e.stopPropagation(); }); $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) { updateRow($(this), true); // Pass save button to function. }); $table.on('mousedown', '.select-basic', function(e) { e.stopPropagation(); }); dataTable = $table.DataTable({ ajax: dataUrl, rowReorder: { dataSrc: 'order', selector: 'tr' }, columns: [{ data: 'order' }, { data: 'name' }, { data: 'place' }, { data: 'delete' }] }); $table.css('border-bottom', 'none') .after($('<div>').addClass('addRow') .append($('<button>').attr('id', 'addRow').text('Add New Row'))); // Add row $('#addRow').click(function() { var $row = $("#new-row-template").find('tr').clone(); dataTable.row.add($row).draw(); // Toggle edit mode upon creation. enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square')); }); $('#btn-save').on('click', function() { updateRows(true); // Update all edited rows }); $('#btn-cancel').on('click', function() { updateRows(false); // Revert all edited rows }); function enableRowEdit($editButton) { $editButton.removeClass().addClass("fa fa-envelope-o"); var $row = $editButton.closest("tr").off("mousedown"); $row.find("td").not(':first').not(':last').each(function(i, el) { enableEditText($(this)) }); $row.find('td:first').each(function(i, el) { enableEditSelect($(this)) }); } function enableEditText($cell) { var txt = $cell.text(); $cell.empty().append($('<input>', { type : 'text', value : txt }).data('original-text', txt)); } function enableEditSelect($cell) { var txt = $cell.text(); $cell.empty().append($('<select>', { class : 'select-basic' }).append(options.map(function(option) { return $('<option>', { text : option.key, value : option.value }) })).data('original-value', txt)); } function updateRows(commit) { $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) { updateRow($(button), commit); }); } function updateRow($saveButton, commit) { $saveButton.removeClass().addClass('fa fa-pencil-square'); var $row = $saveButton.closest("tr"); $row.find('td').not(':first').not(':last').each(function(i, el) { var $input = $(this).find('input'); $(this).text(commit ? $input.val() : $input.data('original-text')); }); $row.find('td:first').each(function(i, el) { var $input = $(this).find('select'); $(this).text(commit ? $input.val() : $input.data('original-value')); }); } }); $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2'; table = $('#example2').DataTable({ ajax: url, order: [[ 0, "desc" ]], rowReorder: { dataSrc: 'place', selector: 'tr' }, columns: [ { data: 'name' }] }); }); }); 

  div.addRow { line-height: 45px; background-color: #fff; padding-left: 10px; border-bottom: 1px solid; border-top: 1px solid #e5e5e5; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script> <link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>order</th> <th>name</th> <th>country</th> <th>action</th> </tr> </thead> </table> <table id="new-row-template" style="display:none"> <tbody> <tr> <td>999</td> <!-- Use a large number or row might be inserted in the middle --> <td>__NAME__</td> <td>__COUNTRY__</td> <td> <i class="fa fa-pencil-square" aria-hidden="true"></i> <i class="fa fa-minus-square" aria-hidden="true"></i> </td> </tr> </tbody> </table> <br> <div class="pull-right"> <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button> </div> <br> <br> <h1> table 2 </h1><br> <br> <table id="example2" class="display" width="100%" cellspacing="0"> <thead> <tr> <th> name</th> </tr> </thead> </table> <br> <br> <h1> table 2 </h1><br> <br> <table id="example2" class="display" width="100%" cellspacing="0"> <thead> <tr> <th> name</th> </tr> </thead> </table> 

Answer 1

I've already responded to this question here: How to drag and drop a column into another

Some changes to your code (a global MouseUp event and a MouseDown event for the second table):

var rowChache = [];

    function mouseUp(event) {
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

    if (ctrl.length > 0 && rowCache.length > 0) {
      var el = rowCache[0];
      var data = el.row.data();

      if (data.length > 0) {
        ctrl.val(data[0].name);
        el.row.remove().draw();
      }
    }

    rowCache = [];
    $('#example tr td:nth-child(2) input').removeClass('border-highlight');
  }

table.on('mousedown', 'tbody tr', function() {
var $row = $(this);

var r = table.rows(function(i, data) {
  return data.name == $row.children().first().text();
});

if (r[0].length > 0) {
  $row.parents('table').find('tr').removeClass('highlight');
  $row.addClass('highlight');
  $('#example tr td:nth-child(2) input').addClass('border-highlight');
}

  rowCache.push({
    row: r
  });
});

Check also the link: http://jsfiddle.net/f7debwj2/47/

Answer 2

Did you even try searching?

https://datatables.net/forums/discussion/30197/add-remove-table-rows-on-drag-and-drop-between-two-datatables

move rows between two datatables

https://gist.github.com/davemo/706167

drag n drop between two tables

Drag/drop between two datatables

The most important tidbit comes from the creator of datatables:

This is not a feature of DataTables, however, it should be quite possible using the API. Specifically I would suggest using row().remove() and row.add() to remove and add rows as required. The drag and drop code however would be external to DataTables.

You will either use https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API or do something in JS, and/or write the missing functionality into the API, but given the above links, you'll see how people have tackled the same problem you've described. Instead of rows, you'll do columns and I'm sure it can all be modified to do exactly what you want.

Answer 3

This one looks like similar to: How to drag and drop a column into another

I have commented on the above post. See If you wanna take that approach.