How refresh datatable after ajax success in laravel?

Question

I use datatable to show my data. I store data in ajax request & append that after a successful response. Data is appended successfully. But the problem is datatable is not updated when appending an item. If I reload the page then It works. See image red mark. Data is appended but datatable is not updated.

Here is my ajax success response

 success: function(response) {
   if (response.status == true) {
      var href = "{{ route('home') }}/";
       $('#dataTable tbody').prepend( "<tr class='data" + response.data.id + "'>" +
           "<td><img src='" + href + "storage/sliders/" + response.data.image + "'></td>" +
            "<td>" + response.data.name + "</td>" +
            "<td>" + response.data.title+ "</td>" +
             "</tr>" ); 
           }
      }

How to auto-refresh datatable after ajax success?

Answer 1

try like bellow:-

var table = $('#table_id').DataTable({

//ajax method that gets data from databases. 

});

use this method to refresh your table:

table.ajax.reload();

if it gives an error like

DataTables warning: table id=table_id- Invalid JSON response

then use the below function before adding data to the table to solve the error:

table.clear()