Use fetch api instead of ajax call in datatable

ricjonsu098

Hi guys. I understand that you can use ajax to populate the datatable. But can you use fetch?
Because I have this normal table, filled dynamically using fetch api.

Here's the code snippet

$(document).ready(function(){
    fillTable();
})
//fetch api (AJAX) to fill table
fillTable = () => {
    fetch('http://localhost:3000/home.json')
    .then(response => response.json())
    .then(data => {
        let html = '';
        for (i = 0; i < data.length; i++){
            html += '<tr>'+
                        '<td class="tdUsername pv3 w-35 pr3 bb b--black-20">'+ data[i].username + '</td>'+
                        '<td class="tdPassword pv3 w-35 pr3 bb b--black-20">'+ data[i].password + '</td>'+
                        '<td class="pv3 w-30 pr3 bb b--black-20">'+
                          '<div class="btn-group" role="group" aria-label="Basic example">'+
                            '<a class="editButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer"  data-toggle="modal">EDIT</a>'+
                            '<a class="deleteButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer"  data-toggle="modal">DELETE</a>'+
                          '</div>'+
                        '</td>'+
                    '</tr>'
        }
        $('#tblBody').html(html);
})
    .catch(err => console.log("ERROR!: ", err))
}

colin

Hi @ricjonsu098 ,

Yep, you could just initialise DataTables after line 22, when the table is being added to the DOM.

Cheers,

Colin