Tengo el siguiente código javascript. Intento obtener información de una API y mostrarla en una tabla de datos. El problema es cuando cargo la página, incluso si tengo 10 elementos por página seleccionada, puedo ver los 102 elementos. Además, cuando cambio de 10 elementos a 25, se elimina toda mi información y aparece el mensaje "No hay registros para mostrar".

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

Este es el código Javascript.

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

Este es el código del archivo Html