Copy Row And Save Datatable Row

by umadevi

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h3 style="color:red;">Select Row</h3>
<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Calvin</td>
      <td>Ananda</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Kampung</td>
      <td>Marketer</td>
      <td>-</td>
    </tr>
  </tbody>
</table>
<br>
<button class="btn btn-success" id="copyToTable2"> Copy To Table 2</button>

<h3 style="color:red;">Table 2</h3>
<table id="table2" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>

<button class="btn btn-success" id="copyToTable3"> Copy To Table 3</button>
<h3 style="color:red;">Table 3</h3>
<table id="table3" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>

CSS

html {
  background: repeat-x scroll 0 0;
  overflow-y: scroll;
}

body {
  background: no-repeat scroll center top transparent;
  font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
  font-size: 11px;
  margin: 0;
  min-height: 100%;
  padding: 0 0 20px;
}

table th {
  background: black;
  color: white;
}

JavaScript

var mainTable = $('#table1').dataTable({
  "bStateSave": true,
  "stateSave": true,
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bInfo": false,
  "bAutoWidth": false
});

/*SELECT OPTION */
mainTable.on('click', 'tbody tr', function() {
  $(this).toggleClass('selected');
});

$('#copyToTable2,#copyToTable3').on('click', function() {
  let $elem = $(this);
  var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, ''));
  var tbl_id = table.attr('id');

  var $row = mainTable.find(".selected");
  if (!$row.length) {
    console.log('You must select some rows to copy first');
    return;
  } else {
    var r = confirm("Copy to table " + tbl_id + "?");
    var table_to_copy = table.dataTable();
    if (r == true) {
      copyRows(mainTable, table_to_copy);
      console.log("Copied!");
      setTimeout('console.clear()', 2000);
    }
  }
});

/* FROM HERE SAVE ROW ================*/

function copyRows(fromTable, toTable) {
  var $row = fromTable.find(".selected"),
    storageName = 'dataSet_' + toTable.attr('id'), //added this line 
    dataSet = localStorage.getItem(storageName) ? JSON.parse(localStorage.getItem(storageName)): []; //added this line 

      $.each($row, function(k, v) {
        if (this !== null) {
          addRow = fromTable.fnGetData(this);
          toTable.fnAddData(addRow);
          dataSet.push(addRow); //added this line 
        }
      });

      localStorage.setItem(storageName, JSON.stringify(dataSet)); //added this line 
    }

  /* =============== TABLE 2 ================== */

  $('#table2').dataTable({
    "data": localStorage.getItem('dataSet_table2') ? JSON.parse(localStorage.getItem('dataSet_table2')) : [], //changed here
    "columns": [{
      "title": "First Name"
    }, {
      "title": "Last Name"
    }, {
      "title": "Action"
    }],
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth":...