Javascript HTML上的数据表问题

我需要一些帮助来解决我最新的HTML数据表问题

我将显示一个只有两列（名称和本地）的表

我导入了“必需”文件（CSS和JS）：

下面是我的HTML代码中“绘制”表格的部分：

<div class="tabela">
      <table id="myTable" class="table table-striped">
        <thead>
          <tr>
            <th class="col-lg-1" style="background:#1a4669; color:white; font-size: 16px; text-shadow: none;"> Name </th>
            <th class="col-lg-1" style="background:#1a4669; color:white; font-size: 16px; text-shadow: none;"> Local </th>
          </tr>
        </thead>
        <tbody id="listview">
        </tbody>
      </table>
    </div>

名称
地方的

表格的数据在

末尾导入，我将表格填入

：

问题是没有检测到数据，但它就在那里

我将留下一个截图：

[！[Display][1]][1]

有人知道有什么问题吗

谢谢

My clients.js代码：

$(document).ready(function(){
      var url2="http://localhost:8080/CS-Management/php/clients.php";
      $.getJSON(url2, function(result){
        console.log(result);
        $.each(result, function(i,field){
          var idclient = field.idclient;
          var code = field.code;
          var name=field.name;
          var local=field.local;

         if ((i % 2) == 0){
            $("#listview").append("<tr style='background:#FFFFFF'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3; a:hover {background-color: yellow;}' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + nome

            +"</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='client.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + localidade

            +"</div></a></td></tr>");
          }

          else if ((i % 2) != 0) {
            $("#listview").append("<tr style='background:#D9E8F5'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + nome

            +"</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + local

            +"</div></a></td></tr>");
          }

        });
      });
});

$（文档）.ready（函数（）{
变量url2=”http://localhost:8080/CS-Management/php/clients.php”；
$.getJSON（url2，函数（结果）{
控制台日志（结果）；
$.each（结果、函数（i、字段）{
var idclient=field.idclient；
var代码=field.code；
var name=field.name；
var local=field.local；
如果（（i%2）==0）{
$（“#列表视图”）。追加（“”）；
}
如果（（i%2）！=0，则为else{
$（“#列表视图”）。追加（“”）；
}
});
});
});

如评论中所述：

您正在异步请求之前实例化DataTable 返回一个响应。确保在中启动DataTable实例 您的XHR“onload”事件处理程序回调

---

在clients.js中，一旦异步请求成功，您需要启动DataTable插件，如下所示：

$(document).ready(function() {
  var url2 = "http://localhost:8080/CS-Management/php/clients.php";
  $.getJSON(url2, function(result) {
    console.log(result);
    $.each(result, function(i, field) {
      var idclient = field.idclient;
      var code = field.code;
      var name = field.name;
      var local = field.local;

      if ((i % 2) == 0) {
        $("#listview").append("<tr style='background:#FFFFFF'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3; a:hover {background-color: yellow;}' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + name

          + "</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='client.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + localidade

          + "</div></a></td></tr>");
      } else if ((i % 2) != 0) {
        $("#listview").append("<tr style='background:#D9E8F5'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + name

          + "</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + local

          + "</div></a></td></tr>");
      }

    });
    //Initialize the DataTable plugin here.
    $("#myTable").DataTable();
  });
});

$（文档）.ready（函数（）{
变量url2=”http://localhost:8080/CS-Management/php/clients.php”；
$.getJSON（url2，函数（结果）{
控制台日志（结果）；
$.each（结果、函数（i、字段）{
var idclient=field.idclient；
var代码=field.code；
var name=field.name；
var local=field.local；
如果（（i%2）==0）{
$（“#列表视图”）。追加（“”）；
}如果（（i%2）！=0，则为else{
$（“#列表视图”）。追加（“”）；
}
});
//在这里初始化DataTable插件。
$（“#myTable”）.DataTable（）；
});
});

---

注:

• 变量

  nome

  不存在，拼写错误，请使用

  name

• 变量

  localidade

  也可能是拼写错误（

  local

  ）
• 您可以避免代码重复，使用类而不是样式 属性在

  if

  语句中

---

datatable的javascript代码？添加client.js的内容，然后我可以帮助您在异步请求返回响应之前实例化datatable。确保在XHR“onload”事件处理程序回调上启动DataTable实例。请记住，这是一个疯狂的猜测，您应该包括一个能为您提供更好答案的答案。@JoseMarques更新！您在哪里初始化数据表<代码>$（“#myTable”）.DataTable（）

$(document).ready(function(){
      var url2="http://localhost:8080/CS-Management/php/clients.php";
      $.getJSON(url2, function(result){
        console.log(result);
        $.each(result, function(i,field){
          var idclient = field.idclient;
          var code = field.code;
          var name=field.name;
          var local=field.local;

         if ((i % 2) == 0){
            $("#listview").append("<tr style='background:#FFFFFF'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3; a:hover {background-color: yellow;}' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + nome

            +"</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='client.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + localidade

            +"</div></a></td></tr>");
          }

          else if ((i % 2) != 0) {
            $("#listview").append("<tr style='background:#D9E8F5'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + nome

            +"</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='myclient.html?idclient="
            + idclient + "'><div style='height:100%;width:100%'>" + local

            +"</div></a></td></tr>");
          }

        });
      });
});

$(document).ready(function() {
  var url2 = "http://localhost:8080/CS-Management/php/clients.php";
  $.getJSON(url2, function(result) {
    console.log(result);
    $.each(result, function(i, field) {
      var idclient = field.idclient;
      var code = field.code;
      var name = field.name;
      var local = field.local;

      if ((i % 2) == 0) {
        $("#listview").append("<tr style='background:#FFFFFF'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3; a:hover {background-color: yellow;}' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + name

          + "</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='client.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + localidade

          + "</div></a></td></tr>");
      } else if ((i % 2) != 0) {
        $("#listview").append("<tr style='background:#D9E8F5'><td><a style='color:inherit; font-size: 14px; font-weight: bold; color:#3357C3' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + name

          + "</div></a></td><td><a style='color:inherit;font-weight: bold; font-size: 14px; color:#3357C3' class='item' href='myclient.html?idclient=" + idclient + "'><div style='height:100%;width:100%'>" + local

          + "</div></a></td></tr>");
      }

    });
    //Initialize the DataTable plugin here.
    $("#myTable").DataTable();
  });
});