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>

我能够打开模态，但它返回错误＆＃34;请求未知＆＃34; 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）;

填充数据表上的数据不起作用

1 个答案: