이미 localStorage에 저장된 테이블을 표시합니다.

Question

새 콘텐츠를 만들고 싶습니다. 새로운 내용은 데이터 테이블과

내가 새로운 표 ADD 버튼을 클릭하면 표가 생성되고 로컬 스토리지에 저장하고있다

를 로컬 스토리지에 저장됩니다.

하지만

When im refresh the page, The table not display but saved to localStorage.

MY JSFiddle

How to be able to display a table [datatable view] that has been created and stored in localStorage when the page is refreshed?

jQuery를 :

$("#mainTable").dataTable(); 

/* CREATE TABLE FITURE */ 
$('.submitButton').click(function() { 
    function getTableList() { 
    var addTable = '<div class="tab-pane" id="folder' + localStorage.Index + '">' + 
     '<div class="zf-table">' + 
     '<table id="table' + localStorage.Index + '" class="table table-bordered table-hover myFade">' + 
     '<thead>' + 
     '<tr>' + 
     '<th style="border-color:rgb(221, 221, 221);"></th>' + 
     '<th>Audience Name</th>' + 
     '<th>Type</th>' + 
     '<th>Size</th>' + 
     '<th>Date Created</th>' + 
     '<th>Action</th>' + 
     '</tr>' + 
     '</thead>' + 
     '</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 resultTable array 
    localStorage.setItem("tableList", JSON.stringify(resultTable)); 

    /* append Table baru */ 
    $('.tab-content').append(newtableHTML); 
    var newTable = $("#table" + localStorage.Index).dataTable(); 
    alert("sucess create table"); 

    } else { 
    alert("Failed create Table"); 
    } 
}); // submitButton func 

//on init fill the table-content 

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); 
    } 
} else { 
    let inititalTable = []; 
    inititalTable.push({ 
    table: $('div.tab-content').html() 
    }); 
    localStorage.setItem("tableList", JSON.stringify(inititalTable)); 
} 

Answer 1

는 테이블 요소에 dataTable()를 호출하는 것을 잊었다 보인다 LocalStorage에서 읽습니다.

for (var i = 0; i < resultTable.length; i++) { 
    var items = resultTable[i]; 
    $(".tab-content").append(items.table); 
} 

당신은 초기 HTML을 추가로 저장 테이블을 통해 반복하여

. 나중에 주문, 검색 및 페이징 기능을 표시하려면 dataTables 플러그인으로 변환해야합니다.

가능한 해결책은 루프의 후 탭 컨텐트 컨테이너의 모든 테이블에 dataTable()를 호출하는 것입니다 :

for (var i = 0; i < resultTable.length; i++) { 
    var items = resultTable[i]; 
    $(".tab-content").append(items.table); 
} 

$(".tab-content table").dataTable();