Pagination does not work correctly when data is changed

Expected behavior

Pagination should let me see the latest updated data instead of the old one

Actual behavior

After updating table data, when I use pagination, it does not show me the latest updated data, instead it reverts to the previous table data, more information is explained below in code.

Resources (screenshots, code snippets etc.)

I am using following code to update the datatable:

$(document).ready(function () {
            $('#dtBasicExample').DataTable();
            $('.dataTables_length').addClass('bs-select');
        });

        var tableData = JSON.parse(jsonDataIsPlacedHere);

        function source(type) {

            document.getElementById("tableBody").innerHTML = "";

            for (i = 0; i < Object.keys(tableData[type]).length; i++) {

                document.getElementById("tableBody").insertAdjacentHTML('beforeend', '<tr><td>' + tableData[type][i].Username + '</td><td>' + tableData[type][i].site + '</td><td>' + tableData[type][i].counter + '</td></tr>');

            }
        }

But after this code when it updates the data, the 1st page is shown correctly, however the moment I use the pagination to go to next page, it reverts back to previous data and deletes the update.

So my question is, how to update datatable source in jquery datatables ? I am assuming that I am doing something wrong here because in vue if we update the data source, DOM is updated automatically but here there must be a different method.

Thanks