在數據表上填充數據不起作用

Question

我想將我的數據填充到繪制在模態上的數據表上，我搜索了很多鏈接，發現了一個有趣的話題。

我有一個按鈕可以觸發函數從 servlet 獲取數據..

<button class="w3-btn w3-black w3-round-xxlarge w3-hover-green" id="viewButton" onClick="loadDoc(this.id)">View</button>

我的ajax代碼..

<script>
function loadDoc(id) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      openModal(this.responseText);
    }
  };
  xhttp.open("GET", "/ETEEAP/ViewApplication?id=" + id, true);
  xhttp.send();
}
function openModal(id){
document.getElementById('id01').style.display='block';
loadTable(id);
}   
</script>

我能夠打開模態，但它返回一個錯誤“REQUESTED UNKNOWN” http://datatables.net/tn/4有關錯誤的詳細信息..

這是我的模態代碼..

<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-animate-top w3-card-8" style="margin-top:20px;">
<header class="w3-container w3-teal">
  <span onclick="document.getElementById('id01').style.display='none';"
  class="w3-closebtn">&times;</span>
  <h2>Program Details</h2>
</header>
<div class="w3-container w3-light-grey" style="margin-bottom: 50px;">
  <div class="w3-container w3-padding-8 w3-opacity w3-white w3-round-xlarge w3-border w3-hover-border-black"
    style="margin: 10px 10px 10px 10px;">
        <table id="myTable1" class="display">
        <thead>
        <tr>
            <th>SUBJECT</th>
            <th>COURSE</th>
            <th>UNITS</th>
            <th>SEMESTER</th>
            <th>YEAR LEVEL</th>
            <th>STATUS</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>SUBJECT</th>
            <th>COURSE</th>
            <th>UNITS</th>
            <th>SEMESTER</th>
            <th>YEAR LEVEL</th>
            <th>STATUS</th>
        </tr>
        </tfoot>
        <tbody>
    </tbody>
    </table>
    <script>
        function loadTable(id){
            alert(id);
            $('#myTable1').DataTable({
                aaData : id,
                aoColumns : [
                    {mDataProp : "SUBJECT"},
                    {mDataProp : "COURSE"},
                    {mDataProp : "UNITS"},
                    {mDataProp : "SEMESTER"},
                    {mDataProp : "YEAR LEVEL"},
                    {mDataProp : "STATUS"}
                            ]
             });
        }
    </script>
    </div>
</div>

這是我從 servlet 得到的響應..

 [{"SUBJECT":"Programming I","UNITS":"3","SEMESTER":"First","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"Communication Arts I","UNITS":"2","SEMESTER":"First","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"Programming II","UNITS":"3","SEMESTER":"Second","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"COMORG","UNITS":"4","SEMESTER":"Second","COURSE":"BSCPE","YEAR LEVEL":"Second","STATUS":"PENDING"}]

當我運行這個程序時，它會拋出上面的錯誤。 誰能幫我..

Answer 1

它現在正在工作..我只將響應轉換為json..

id = $.parseJSON(id);