Не удается клонировать HTML и значения в JQuery DataTables 1,10

Question

Этот вопрос был задан в нескольких случаях, например:

Store Cloned Element in Variable

Copy DOM Element

Однако, у меня проблемы, выбирая, скажем <div id="XYZ"></div> и клонирование его переменной для jQuery DataTable fnStateSaveParams для сохранения. Когда страница обновляется, она предназначена для перезагрузки клонированного объекта обратно в HTML через fnStateLoadParams. Я пытаюсь использовать .clone() над .html(), потому что мне также нужны значения, хранящиеся в динамически сгенерированных текстовых окнах.

Если я не сохраняю и не загружаю через плагин 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> 

Конечный сценарий будет более сложным, однако выше является самой простой формой того, что я пытаюсь создать. Если вам нужна дополнительная информация, не стесняйтесь спрашивать, и я обязательно обновлю вопрос.

Answer 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; 
    } 
    // ... ... ... 
}