How can I refresh DataTable after an ajax success?

Question

I have tried different ways to refresh my data table after an AJAX Success, but without luck. I tried draw() and .ajax.reload() function, but still no luck. Do you have any idea how to refresh it?

Here is my code

HTML

<table id="giacenza" class="table table-striped table-bordered">
   <thead>
      <tr>
         <th>Modello</th>
         <th>Descrizione</th>
         <th>Colore</th>
         <th>Taglia</th>
         <th>Barcode</th>
         <th>Quantità</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

JavaScript

$(document).ready(function() {
    function getRecords(){
        $.ajax({
            type: "POST",
            url: "functions/getImported.php",
            success: function(result) {
                var table = $('#giacenza').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdfHtml5', 'print'
                    ],
                    order: [[ 1, "asc" ]],
                });
                var data = JSON.parse(result);
                table.rows.add(data).draw();
            },
            error: function(result) {
                alert("error: "+result);
            }
        });
    }
    getRecords();
    $("#scarica-articolo").submit(function(event) {
        event.preventDefault();
        var codbarra = $("#codbarra").val();
        $("#scarica-btn").attr("disabled",true);
        $.ajax({
            type: "POST",
            url: "functions/scaricaArticolo.php",
            data: {codbarra:codbarra},
            success: function(result) {
                if(result = "OK"){
                    new PNotify({
                      title: 'Articolo scaricato!',
                      text: 'L\'articolo è già stato scaricato dalla tabella seguente!',
                      type: 'success',
                      styling: 'bootstrap3'
                    });
                    $("#scarica-btn").attr("disabled",false);
                    getRecords();
                }else if(result == "KO"){
                    new PNotify({
                        title: 'Oh No!',
                        text: 'La query non è andata a buon fine. Contattare l\'assistenza.',
                        type: 'error',
                        styling: 'bootstrap3'
                    });
                    $("#scarica-btn").attr("disabled",false);
                }
            },
            error: function(result) {
                alert("error: "+result);
            }
        });
    });
});

PHP

<?php
include("db_config.php");
$mysqli->set_charset("utf8");
$codbarra = $mysqli->real_escape_string($_POST["codbarra"]);

$query = "UPDATE records SET PARESTALLA = PARESTALLA-1 WHERE CODBARRA = ".$codbarra.";";
$results = array();
$result = $mysqli->prepare($query);
$result->execute();
if($result->affected_rows > 0){
    echo "OK";
}else{
    echo "KO";
}
?>

EDIT: I updated my JavaScript script but I cannot resolve my issue. Now I still receive an error similar: "DataTables warning: table id=giacenza - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 "

Answer 1

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';