Reload Datatable After Ajax Success

How can I refresh DataTable after an ajax success?

To successfully reload the table

table.ajax.reload();//where the table variable is the variable that holds the DataTable itself 

Example

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

//ajax call that fetches data from the database. 

});

Another idea would be to have a javascript function which gets the record from the database. After getting success on deleting from the database, call the function again.

Example

function getRecords(){
//this gets the full list from the database on document ready 
//make Ajax call to retrieve from database 
}

if(result == 'OK'){
//its been successfully deleted 
getRecords();//call the js function that gets from database again
}

EDIT
You are using mysqli. This API supports prepared statements. Please do use that..

$query = "UPDATE records SET PARESTALLA = PARESTALLA-1 WHERE CODBARRA = ?";

$result = $mysqli->prepare($query); 
$result->bind_param('s', $codbarra); 
$result->execute();
echo $result->affected_rows > 0 ? 'OK' : 'KO'; 

how to refresh datatables after ajax call

Edit: try this (For - datatable version 1.10.9)

$('#formdeposit').submit(function(e){
    e.preventDefault();
    if (grecaptcha.getResponse()) {

         var formData = {
            "_token": "{{ csrf_token() }}",
            'deposit' : $('#deposit').val(),
            'coin' : $('#coin option:selected').val()
        };
        $.ajax({
            type : 'POST',
            url : '{{ asset("/member/deposit/process") }}',
            data : formData,
            dataType : 'json',
            encode : true
        })
        .done(function(data){


              console.log(data);
              $('#myModal').modal('show');
        //  

        if (data.pesan=='ok')
            {
            $('#test').html(data.html);     
            }

        else{
            $('#test').html(data.pesan);
        }  
        var table = $('#transaction_data').DataTable(); 
        table.ajax.reload( null, false );

              });

        e.preventDefault();

        }
        else{ alert('Please Confirm The Captcha') }
});

how to refresh datatables after ajax response

Instead of using jQuery Ajax to populate your DataTable, why don't you use the built-in Ajax function? It's a lot simpler. Follow this example to define your DataTable, then when you want to reload inside your button click handler do:

VendorClient.ajax.reload();

Or if you want to change the url or search parameters do:

VendorClient.ajax.url('new-url-here').load();

If you have options that you want to send with your ajax url you can define it as an object.

By doing it this way you don't have the problems of recreating your DataTable each time.

---

Related Topics