HTML 上的数据表问题

我需要一些帮助来解决我在 HTML 上使用数据表的最新问题。

我显示了一个只有两列(名称和本地(的表。

我导入了"必需"文件(CSS 和 JS(：

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>

这是我的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>

表的数据在<body>末尾导入，我在<tbody>中填充表：

  <script src="./js/clients.js" charset="utf-8"></script>

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

我会留下截图：

[！显示][1]][1]

有谁知道问题出在哪里？

谢谢

我的客户端.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>");
          }
        });
      });
});

如评论中所述：

您在异步请求之前实例化数据表返回响应。请确保在中启动数据表实例您的 XHR"加载"事件处理程序回调。

在客户端中.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();
  });
});

笔记：

变量nome不存在，拼写错误，请使用name .
变量localidade也可能拼写错误(local(。
您可以避免代码重复并使用类而不是样式属性在if语句中。

相关内容

最新更新

热门标签：