Jquery - Bootstrap DataTable Refresh issue DATA

Question

Could you please assist me with this issue related to Bootstrap - Jquery Table?

I would like to retrieve data from a database server In JSON Format (through an ajax call) into a bootstrap DataTable and then reload the DataTable only.

Here you are the code, this will be run once pressed the click button (search):

var prova = null;

$(document).ready(function(){
        prova = $('#prova_table').DataTable({
            paging: true,
            searching: false
        });
        prendivalori();
       });  


function prendivalori() {
       $("#bottone").click(function() {
        $("#prova_table").empty();
        var sopravvissuti = $('#sopravvissuti').val();
        var vita = $('#vita').val();
        var provincia = $('#provincia').val();
        var campi = $('#campi').val();
        var table = $('#prova_table');

        $.ajax({
                type: 'GET',
                url: './php/select.php',
                data: {'sopravvissuti': sopravvissuti, 'vita': vita, 'provincia':provincia, 'campi':campi},
                dataType: 'json',
                success: function(data) {
                                    table.append("<thead><tr><th class='th-sm'>Cognome</th><th class='th-sm'>Nome</th><th class='th-sm'>Sesso</th></tr></thead>");
                                    console.log(data);
                                    len=data[0].length;
                                    table.append("<tbody>");
                        for(i=0; i< len; i++){

                            temp=data[0][i]
                            table.append("<tr><td>" + temp[1] + "</td><td>" + temp[0] + "</td><td>" 
                            + temp[2] +"</td></tr>");
                        }
                                                table.append("</tbody>");

                                                $('#prova_table').DataTable().ajax.reload();

                        }

                ,
                error: function(data) {
                        alert('Assicurarsi di aver selezionato tutte le caselle');

                }
        });

    });
};

Here you are the error message received once clicked button data...

DataTables warning: table id=prova_table - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

The json data received from the server are correct because we can see them properly into the table but we are unable to use all the functions Bootstrap DataTable provides like Pagination search and number of entries ....

I'm using all the updated links for running the website..

ETC ECT

Here you are a JSON response:

Many thanks in advance for all you kind support Have a nice day Andrea

Answer 1

You should not do table.append() and any other direct dom changes on table. Jquery data table will do this for you if you pass options to it in right way.

Do it this way.

First initialize the datatable like below with column names if available

var table = $("#myTable").DataTable({
    data:[],
    columns: [
                { "data": "Cognome"  },
                { "data": "Nome" },
                { "data": "Sesso" },
                { "data": "data di nascita" }
    ],        
});

in on click of button, do a get ajax call and in done callback clear the table table.clear().draw(); and table.rows.add(result).draw() to render data to the table.

    $.ajax({
            url: "https://www.mocky.io/v2/5e89289e3100005600d39c17",
            type: "get",
        }).done(function (result) {
            table.clear().draw();
            table.rows.add(result).draw();
         })

JSFiddle: https://jsfiddle.net/k0d1mzgL/

 var table = $("#myTable").DataTable({ data:[], columns: [ { "data": "Cognome","title": "Cognome"}, { "data": "Nome","title": "Nome"}, { "data": "Sesso","title": "Sesso"}, { "data": "data di nascita","title": "data di nascita" } ], }); $("#getDataBtn").click(function(){ $.ajax({ url: "https://www.mocky.io/v2/5e89289e3100005600d39c17", type: "get", }).done(function (result) { table.clear().draw(); table.rows.add(result).draw(); }).fail(function (jqXHR, textStatus, errorThrown) { //if failed console.log("Due to https issue,this request cant be made, go check jsfiddle link provided in answer"); }); });

 <link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" > <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <table id="myTable"> </table> <button id="getDataBtn">Get data</button>