Pagination does not work correctly when table data is changed from AJAX

Question

I am using following code to update the datatable from Django View

$.ajax({
      url: 'filter/',
      type: 'GET',
      dataType: "json",
      data:{"no_days":no_days},
      success: function(res){
        var tableData="";
        $.each(res, function(key, value){
                tableData += '<tr>';
                tableData += '<td>' + value.from_project + '</td>';
                tableData += '<td>' + value.billing_id + '</td>';
                tableData += '<td>' + value.total + '</td>';
                tableData += '</tr>';
        });

        $('#tableBounceBody').html(tableData);
        $('#eBounceTable').DataTable();

        // $('#eBounceTable').DataTable({}).ajax.reload();
        // $('#eBounceTable').Datatable().draw();
        
      },
      error:function(res){console.log("Something went wrong!")}
    });

The first page is displayed correctly when this code updates the data, but as soon as I use the pagination to move to the next page, it reverts back to previous data and deletes the update.

So my question is, how to update datatable in jQuery datatable after ajax success ? I am assuming that I am doing something wrong here.