Problem reloading DataTable

ricjonsu098

I'm having trouble reloading the datatable. I used fetch api to dynamically fill my table. And the problem is, when I'm doing add, edit, or delete, the database updates, but the datatable does not. When I search, sort, or change page, the data inside the table reverts to the old one. And when I refresh the page, that's the time when the datatable becomes updated. I use express JS for the backend.

Here's my code:

Code Snippet for the initialization of datatable

$(document).ready(function(){
    fillTable();
})

//fetch api (AJAX) to fill table
fillTable = () => {
    fetch('http://localhost:3000/home.json')
    .then(response => response.json())
    .then(data => {
        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);
        $('#user').DataTable(); //DataTable initialization
    })
    .catch(err => console.log("ERROR!: ", err))
}

Here's the code snippet for adding users

addUserToDB = () => {
    fetch('http://localhost:3000/addUser', {
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      username: user.value,
      password: pass.value
    })
  })
  .then(response => response.json())
  .then(user => {
    if(user.username){
        $("#addModal").modal('hide');
        $("#showConfirm").modal('toggle');
      fillTable(); // I call the function to refresh the table
      $('#addModal').on('hidden.bs.modal', function () {
        $(this).find("input").val('').end();
      });
    } else {
      window.alert('USER ALREADY EXIST!');
    }
  })
  .catch(err => console('ERROR!: ', err))
}

colin

Hi @ricjonsu098 ,

I assume your add, edit and delete are your own, and not from Editor - there's no mention of that in your code snippet.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin