Почему элементы аэды не применяются?

Question

Ну, я создал таблицу здесь с JQuery мобильный:

<div data-role="page" id="PageOrderList" data-theme="b"> 
    <div data-role="header"> 
     <h1>Aufträge bearbeiten</h1> 
     <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a> 
    </div> 
    <div data-role="main" class="ui-content"> 
     <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive"> 
      <thead> 
       <tr> 
        <th>AuftragsNr.</th> 
        <th>Auftragskurztext</th> 
        <th>Langtext</th> 
       </tr> 
      </thead> 
      <tbody id="myList"> 
       <tr id="8913"> 
        <td>8913</td> 
        <td>Sonderauftrag</td> 
        <td>Das ist ein Sonderauftrag.</td> 
       </tr> 
       <tr id="1466"> 
        <td>1466</td> 
        <td>Auftrag Fr. Schwarz</td> 
        <td>Ein Auftrag für Fr. Schwarz.</td> 
       </tr> 
       <!-- loaded by js --> 
      </tbody> 
     </table> 
    </div> 
    <div data-role="footer" align="center"> 
     <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button> 
    </div> 
</div> 

То, что я сейчас пытаюсь сделать, это загрузить новые строки из файла в формате JSON. Это файл:

{ 
    "order": [{ 
     "orderId": "4412", 
     "shortText": "Lieferung für Mayer", 
     "longText": "Das ist eine Lieferung für Mayer." 
    }, { 
     "orderId": "7899", 
     "shortText": "Bestellung für Schmidt", 
     "longText": "Das ist eine Bestellng für Schmidt." 
    }, { 
     "orderId": "3981", 
     "shortText": "Sonderauftrag", 
     "longText": "Das ist ein Sonderauftrag." 
    }] 
} 

Я использовал id="ReloadOrderList" с помощью прослушивателя событий из JQuery. Это мой код:

// Reload button PageOrderList 
$("#ReloadOrderList").click(function() { 
    $.getJSON("data/data.json", function(json) { 
     console.log(json); 
     var i; 
     var out = "empty"; 
     console.log(json.order.length); 

     for (i = 0; i < 3; i++) { 
      out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>"; 
     } 
     //document.getElementById("myList").innerHTML = out; 
     $("#myList").append(out); 
    }); 
}); 

Когда я нажал на кнопку (ReloadOrderList) новый контент загружается, не проблема, но THEAD элементы не применяются перед данными. Вот изображение, чтобы визуализировать мою проблему:

application

Я надеюсь, что было достаточно информации: D

Answer 1

После добавления новых строк, вы хотите обновления за столом с помощью вызова .table ("refresh").

Вы также можете посмотреть демо здесь jQuery Mobile Demo

$("#ReloadOrderList").click(function() { 
 
    
 
    // simulated getJSON() 
 
    var json = { 
 
    "order": [ 
 
     { "orderId": "4412", "shortText": "Lieferung für Mayer", "longText": "Das ist eine Lieferung für Mayer." }, 
 
     { "orderId": "7899", "shortText": "Bestellung für Schmidt", "longText": "Das ist eine Bestellng für Schmidt." }, 
 
     { "orderId": "3981", "shortText": "Sonderauftrag", "longText": "Das ist ein Sonderauftrag." } 
 
    ] 
 
    }; 
 

 
    var out = "empty"; 
 

 
    for (i = 0; i < 3; i++) { 
 
    out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>"; 
 
    } 
 

 
    $("#myList").append(out); 
 

 
    // ========================== 
 
    // This is what you need 
 
    // ========================== 
 
    $("#myList").closest("table").table("refresh"); 
 
    // ========================== 
 

 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" integrity="sha256-ofETIFmuKXiVQil+cQ1tReYDB/lh0lrMyxLdsw+NG8w=" crossorigin="anonymous" /> 
 

 
<div data-role="page" id="PageOrderList" data-theme="b"> 
 
    <div data-role="header"> 
 
     <h1>Aufträge bearbeiten</h1> 
 
     <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a> 
 
    </div> 
 
    <div data-role="main" class="ui-content"> 
 
     <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive"> 
 
      <thead> 
 
       <tr> 
 
        <th>AuftragsNr.</th> 
 
        <th>Auftragskurztext</th> 
 
        <th>Langtext</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="myList"> 
 
       <tr id="8913"> 
 
        <td>8913</td> 
 
        <td>Sonderauftrag</td> 
 
        <td>Das ist ein Sonderauftrag.</td> 
 
       </tr> 
 
       <tr id="1466"> 
 
        <td>1466</td> 
 
        <td>Auftrag Fr. Schwarz</td> 
 
        <td>Ein Auftrag für Fr. Schwarz.</td> 
 
       </tr> 
 
       <!-- loaded by js --> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
    <div data-role="footer" align="center"> 
 
     <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js" integrity="sha256-E3NHJIUaclYHEQ6uRnkvD72rAmbJYVJ92sCOU/0Rd7s=" crossorigin="anonymous"></script>