gpt4 book ai didi

javascript - HTML 上的数据表问题

转载 作者:行者123 更新时间:2023-11-28 03:34:48 27 4
gpt4 key购买 nike

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

我正在显示一个只有两列(名称和本地)的表格。

我导入了“必需的”文件(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]

有人知道问题出在哪里吗?

谢谢

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

});
});
});

最佳答案

如评论中所述:

You are instantiating your DataTable before the asynchronous request returns a response. Make sure you initiate the DataTable instance in your XHR 'onload' event handler callback.


在您的 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 语句中的属性。

关于javascript - HTML 上的数据表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44549123/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com