Wie wird die Zeile in die Datentabelle kopiert und in localStorage gespeichert?

Question

Ich bin in den letzten Schritten, um mein Projekt zu beenden.

und vielleicht ist dies die letzte Frage, um dies mein Projekt zu diskutieren. Aber ich habe einige Hindernisse:

1. I Reihe table1-table2 und speichern Sie die Ergebniszeile in der table2 in localstorage kopieren möchten.

2. Ich habe keine Idee, Zeile von MainTable [table1] zu table2 zu kopieren, dann speichern Sie sie in localStorage wie meine Eingabeformularmethode (JSFiddle 1).

ich bereits Speichern Zeile Tabelle von Eingabeformular und Geschäft erfolgreich erstellen zu localstorage und ich möchte, dass die Copy Reihe wie diese Arbeits, speicherbar in localstorage erstellen Row Eigenschaft.

var dataSet; 
try { 
    dataSet = JSON.parse(localStorage.getItem('dataSet')) || []; 
} catch (err) { 
    dataSet = []; 
} 
$('#myTable').dataTable({ 
    "data": [], 
    "columns": [{ 
    "title": "First Name" 
    }, { 
    "title": "Last Name" 
    }, { 
    "title": "Action" 
    }], 
    "bStateSave": true, 
    "stateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}); 
oTable = $('#myTable').DataTable(); 
for (var i = 0; i < dataSet.length; i++) { 
    oTable.row.add(dataSet[i]).draw(); 
} 

$('#Save').click(function() { 
    var data = [ 
     $('#first').val(), 
     $('#last').val(), 
     "<button class='delete'>Delete</button>" 
    ]; 
    oTable.row.add(data).draw(); 
    dataSet.push(data); 
    localStorage.setItem('dataSet', JSON.stringify(dataSet)); 

}); 

JSFiddle 1: Reihe erstellen und zu local

JSFiddle 2 sparen: Kopieren Row und Speichern Zeile local[ich hier Arbeiten]

kann jeder hilft mich?

Wenn Sie denken, ich bin faul. Ich schätze das, weil ich nicht in der Lage war, eine Funktion zu machen, und das ist meine neue Sache beim Programmieren. aber ich suche immer nach Referenzen, und um es zu festigen, muss ich hierher kommen.

Korrigieren Sie mich, wenn ich mit dieser Frage falsch bin.

Answer 1

Sie können es wie das Arbeitsbeispiel tun. In copyRows Funktion kopierte Zeilen in dataSet Array kopieren und dann das Array zu localStorage speichern. Und setzen Sie Daten von table2 auf dataSet. Lesen Sie auch zuerst dataSet von localStorage.

UPDATE: Sie müssen verschiedene localStorage Artikel für verschiedene Tabelle verwenden. Hier verwende ich dataSet_tableid Format, um Daten in localStorage zu speichern.

Hier ist die modifizierte JS.

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": false 
}); 

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

UPDATED FIDDLE