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