2014-12-24 1 views
0

jQuery를 Datatables에 HTML 및 값을 복제 할 수 없습니다 :예를 들어,이 질문은 몇 차례 요청 된 1.10

Store Cloned Element in Variable

Copy DOM Element

그러나, 나는 데 문제 <div id="XYZ"></div> 말을 선택 저장하려면 jQuery DataTable fnStateSaveParams에 대한 변수에 복제하십시오. 페이지가 새로 고침되면 fnStateLoadParams을 통해 복제 된 개체를 다시 HTML로 다시로드합니다. .html()보다 .clone()을 사용하려고합니다. 동적으로 생성 된 텍스트 상자에 저장된 값이 필요하기 때문입니다.

Datatables 플러그인을 통해 저장하고로드하지 않으면 완벽하게 작동합니다. 아래 코드와 비슷한 코드를 호출하자마자 작동이 멈 춥니 다 (아래 코드에 여러 가지 변형을 시도했습니다). 누구든지 아이디어 나 제안을 얻었습니까?

"fnStateSaveParams": function (oSettings, oData) { 
    var clonedHtml= $("#XYZ").clone(true); 
    oData.storedHtml = clonedHtml; 
}, 
"fnStateLoadParams": function (oSettings, oData) { 
    //$("#displayHtml").append(oData.storedHtml); 
    //$("#displayHtml").html(oData.storedHtml); 
    //$(oData.storedHtml).prependTo("#displayHtml") 
} 

<div id="XYZ"> 
    <div data-template=""> 
     <label class="bolder"></label> 

     <div class="input-append"> 
      <div class="inline-block advancedSearchItem"> 
       <input type="text" id="test1" value="Test Scenario" /> 
      </div> 

      <a href="#" data-id="" class="btn btn-small btn-danger removeField"> 
       <div class="hidden-phone">Remove</div> 
       <i class="icon-trash icon-only hidden-tablet hidden-desktop"></i> 
      </a> 
     </div> 
    </div> 
</div> 

최종 시나리오는 더 복잡하지만 위의 내용은 내가 만드는 중 가장 간단한 형태입니다. 더 많은 정보가 필요하시면 언제든지 물어보십시오. 그에 따라 질문을 업데이트하겠습니다.

답변

1

.clone()을 사용하여 모든 HTML 및 텍스트 상자 값을 가져 오는 방법을 찾지 못했습니다. 그러나, 나는 해결책을 생각해 내었고 아래의 코드는 참조 점이 필요한 사람을위한 것입니다.

.html() (대부분 알고있을 것입니다)을 사용하면 사용 가능한 HTML 만 복사하고 본질적으로 텍스트 입력란에 '자리 표시 자'텍스트를 무시합니다. 내 해결책은 value을 '자리 표시 자'텍스트로 취급하지 않고 HTML로 강제 전송하는 것입니다. 이렇게하면 페이지가로드 될 때 다시 사용할 수 있습니다.

$(document).on("click", "#advancedSearchButton", function(event) { 
    event.preventDefault(); 

    // DO SOME STUFF HERE 

    $("[data-value]").each(function(index) { 
     if (index > 0) { 
      fieldCount++; 
      $(this).attr("value", $(this).val()); 
     } 
    }); 

    oTable.fnFilter(""); 
}); 

function loadData() { 
    // ... ... ... 
    "fnStateSaveParams": function(oSettings, oData) { 
     oData.advancedSearchHtml = $("#addedSearchFields").html(); 
     oData.fieldCount = fieldCount; 
     oData.isAdvancedSearch = isAdvancedSearch; 
    }, 
    "fnStateLoadParams": function(oSettings, oData) { 
     $("#addedSearchFields").html(oData.advancedSearchHtml); 

     if (oData.isAdvancedSearch == true) { 
      $("#collapseElement").removeClass("collapsed"); 
      $("#collapseIcon").removeClass().addClass("icon-chevron-up"); 
      $("#filter").hide(); 
     } 

     isAdvancedSearch = oData.isAdvancedSearch; 
     advancedSearchFields = oData.fieldCount; 
    } 
    // ... ... ... 
}