jQuery DataTable – Moving multiple row between tables.

My requirement:
I have two tables need to move row between the tables,
On row click the row will be marked to selected class. By clicking right or left button the row is moved to the corresponding table.

Solution:

  • Defining two tables
var stockTable = $('#table1').dataTable({
  "sPaginationType": "full_numbers",
  "bFilter": false
}); // first table </code>

var catalogTable = $('#table2').dataTable({
  "sPaginationType": "full_numbers",
  "bFilter": false
}); // Second table
  • On click mark row as selected.
stockTable.on('click', 'tbody tr' ,function() {
  $(this).toggleClass('selected');
});
catalogTable.on('click', 'tbody tr' ,function() {
  $(this).toggleClass('selected');
});
  • On click button call the function to move the rows.
$('#LeftMove').on('click',function () {
  moveRows(catalogTable, stockTable);
});</code>

$('#RightMove').on('click',function () {
  moveRows(stockTable, catalogTable);
});
  • moveRows function handles row insertion and deletion from one to another
function moveRows(fromTable, toTable){
  var $row= fromTable.find(".selected");
  $.each($row, function(k, v){
    if(this != null){
      addRow = fromTable.fnGetData(this);
      toTable.fnAddData(addRow);
      fromTable.fnDeleteRow(this);
    }
  });
}

Working example in Plunker

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>