I have 2 fiddles.
In the first one (JSFiddle 1) I create a new table and save into localStorage
In the second one (JSFiddle 2) I created a copy row feature (selected row and copied it to the selected table).
My goal is to combine both fiddles into one, that allows you to:
- Add new table [Available on JSFiddle 1]
- When adding Table, there is a 'copy to table 1' option [Available on JSFiddle 2]
- Can select row, then copy it in selected table using that option. [Available on JSFiddle 2]
I need to delete this, and replace it with the new table feature, using code $('#table' + localStorage.Index).dataTable({...})
$('#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
});
I've spent a lot of time on this but I have some problems:
- I can't choose row for the second time when it is reloaded.
- Can't copy row.
My Working Fiddle [UPDATED 2] : https://jsfiddle.net/59u53rvn/2/
var mainTable = $("#mainTable").dataTable({
"bStateSave": true,
"stateSave": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false
});
/*SELECT OPTION */
mainTable.on('click', 'tr', function() {
var $row = $(this),
isSelected = $row.hasClass('selected')
$row.toggleClass('selected')
.find(':checkbox').prop('checked', !isSelected);
});
$('#copyToTable1,#copyToTable2').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);
}
}
});
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
}
/* CREATE TABLE FITURE */
$('.submitButton').click(function() {
function getTableList() {
var addTable = '<button id="copyToTable' + localStorage.Index + '" >copyToTable ' + localStorage.Index + '</button>' +
'<div class="tab-pane" id="folder' + localStorage.Index + '">' +
'<div class="zf-table">' +
'<table id="table' + localStorage.Index + '" class="table table-bordered table-hover myFade dynamicTable">' +
'<thead>' +
'<tr>' +
'<th>Audience Name</th>' +
'<th>Type</th>' +
'</tr>' +
'</thead><tbody></tbody>' +
'</table>' +
'</div>' +
'</div>';
return addTable;
}
if (true) {
/** INDEX FOR INCREMENT ID **/
if (typeof(Storage) !== "undefined") {
if (localStorage.Index) {
localStorage.Index = Number(localStorage.Index) + 1;
} else {
localStorage.Index = 1;
}
} // if storage
var resultTable = JSON.parse(localStorage.getItem("tableList"));
if (resultTable == null) {
resultTable = [];
}
let newtableHTML = getTableList();
resultTable.push({
table: newtableHTML
});
// save the new resultFolder array
localStorage.setItem("tableList", JSON.stringify(resultTable));
/* append Table baru */
$('.tab-content').append(newtableHTML);
var newTable = $("#table" + localStorage.Index).dataTable({
"data": localStorage.getItem('dataSet_table' + localStorage.Index) ? JSON.parse(localStorage.getItem('dataSet_table' + localStorage.Index)) : [], //changed here
"bStateSave": true,
"stateSave": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false
});
alert("sucess create table");
} else {
alert("Failed create Table");
}
}); // submitButton func
//on init fill the table-content
$(document).ready(function() {
var resultTable = JSON.parse(localStorage.getItem("tableList"));
if (resultTable != null) {
//get the nav reference in DOM
let tableContent = $(".tab-content");
//clear the html contents
tableContent.html('');
for (var i = 0; i < resultTable.length; i++) {
var items = resultTable[i];
$(".tab-content").append(items.table);
}
$(".dynamicTable").dataTable({
"data": localStorage.getItem('dataSet_table' + localStorage.Index) ? JSON.parse(localStorage.getItem('dataSet_table' + localStorage.Index)) : [], //changed here
"bStateSave": true,
"stateSave": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false
});
} else {
let inititalTable = [];
inititalTable.push({
table: $('div.tab-content').html()
});
localStorage.setItem("tableList", JSON.stringify(inititalTable));
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<input type="button" class="submitButton" value="ADD NEW TABLE">
<div class="tab-content">
<div class="tab-pane" id="mainFolder">
<h3>DEFAULT TABLE</h3>
<div class="zf-table">
<table id="mainTable" class="table table-bordered table-hover myFade">
<thead>
<tr>
<th>Audience Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calvin</td>
<td>Lookalike</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Ask whatever I have not explained to this question, I will fix it here and in the fiddle.
