• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

108
Vistas
Datatable not showing properly and losing information

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

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda