Question

我需要一些帮助才能使用DataTables解决HTML上的最新问题。

我正在显示一个只包含两列（名称和本地）的表。

我导入了＆＃34;必需＆＃34;文件（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代码的一部分＆＃34; draw＆＃34;表：

<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]

有谁知道问题是什么？

由于

我的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>");
          }

        });
      });
});

Answer 1

如评论中所述：

您在异步请求之前实例化DataTable 返回一个回复。确保启动DataTable实例您的XHR＆＃39; onload＆＃39;事件处理程序回调。

在您的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();
  });
});

注意：

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

关于HTML的DataTable问题

1 个答案: