Can anyone assist me in resolving my most recent issue with HTML and DataTables?
I'm currently displaying a table with just two columns (name and local).
I have included the necessary files (CSS and 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>
Here is the snippet of my HTML code responsible for rendering the table:
<div class="table">
<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>
The data for the table is fetched at the end of the <body>, where I populate the table inside the <tbody>:
<script src="./js/clients.js" charset="utf-8"></script>
The issue lies in the fact that even though the data is present, it's not being detected!
Please refer to the screenshot provided below:
[![Display][1]][1]
If anyone has insights on what might be causing this problem, your help would be greatly appreciated.
Thank you.
Below is my clients.js code:
$(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>");
}
});
});
});