I have the following javascript code. I try to get some information from an API and display them in a datatable. The problem is when i load the page, even if i have 10 elements per page selected I can see all 102 elements. Also when i change from 10 elements to 25 all my information is removed and I get the messege "No records to display".
buildlist()
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
}
)
}
)
}
$(document).ready(function () {
$('#datatable').dataTable();
});
This is the Javascript code.
<div class="card-body">
<table id="datatable">
<thead>
<tr>
<th>ID ANGAJAT</th>
<th>NUME</th>
<th>PRENUME</th>
<th>FUNCTIE</th>
<th>DOMICILIU FEROVIAR</th>
<th>ORE LUCRATE</th>
<th>DISPONIBILITATE</th>
<th>PROGRAMARE</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
This is the code from the Html file
Try this
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
$('#datatable').dataTable();
}
)
}
)
}
$(document).ready(function () {
buildlist();
});
Also, try using datatable's ajax functionality - https://datatables.net/examples/ajax/objects.html