Da Json a html tabella grafica

[DF24]

Salve a tutti, premetto che sono un novizio e che ho appena iniziato a vedere questo mondo. Mi hanno girato un problema, ovvero, da un file JSON, esportare alcuni dati e riportarlo sotto forma di tabella ordinata in una pagina html.
Al momento il file JSON lo ho esportato in questo modo:

<script>
            jQuery(function () {
                $('#loading').hide();

                $(document).ajaxStart(function () {
                    $('#loading').show(200);
                    $('#carica').attr("disabled", "disabled").toggleClass("red");
                });

                $(document).ajaxStop(function () {
                    $('#loading').hide(100);
                    $('#carica').removeAttr("disabled").toggleClass("red");
                });

                $('#carica').click(function () {
                    $('#dati').html("");
                  
                    $.getJSON("prova.json", function (data) {
                        console.log("dati caricati dal server: " + data);
                        var elementiDaAggiungere = [];
                        $.each(data, function (indice, elemento) {
                            elementiDaAggiungere.push("<li>" + elemento.id + " " + elemento.data + " " + elemento.cliente + " " + elemento.statoatt + "</li>");

                        });

                        var htmlDaAggiungere = elementiDaAggiungere.join("");
                        $('#dati').append(htmlDaAggiungere).show(1000);

                    });

                });

            });


        </script>

----------------

nel body ho aggiunto questo

            <ul id="dati"></ul>
            <div id="loading">Loading ...</div>
            <button id="carica" class="button">Carica</button>

Tramite la pressione del bottone mi carica i dati richiesti, funziona ma me li espone chiaramente in riga...così...123456 13/06/2016 cliente attivo..
Ora non saprei come fare a impostare il tutto facendo in modo che mi prenda i dati (come fa ora) ma me li suddivida in una tabella col nome intestazione sopra e i dati sotto...
ecco un esempio....

http://www.jqueryscript.net/images/jQuery-Plugin-For-Converting-Table-Into-JSON-Data-Table-to-JSON.jpg

piccolo edit, nel body ho messo questo

                                <div class="table">
            <!-- <div class="col-md-10 col-md-offset-1"> -->
            <div>
                <table id="example" class="table toggle-circle-filled" cellspacing="0" width="100%">


                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Data</th>
                            <th>Cliente</th>
                            <th>Stato</th>
                        </tr>
                    </thead>


                    <tbody></tbody>
                </table>

Grazie in anticipo

[ciro78]

Ciao ,
ti invito a leggere il regolamento.

Salve a tutti, premetto che sono un novizio e che ho appena iniziato a vedere questo mondo. Mi hanno girato un problema, ovvero, da un file JSON, esportare alcuni dati e riportarlo sotto forma di tabella ordinata in una pagina html.
Al momento il file JSON lo ho esportato in questo modo:

<script>
            jQuery(function () {
                $('#loading').hide();

                $(document).ajaxStart(function () {
                    $('#loading').show(200);
                    $('#carica').attr("disabled", "disabled").toggleClass("red");
                });

                $(document).ajaxStop(function () {
                    $('#loading').hide(100);
                    $('#carica').removeAttr("disabled").toggleClass("red");
                });

                $('#carica').click(function () {
                    $('#dati').html("");
                  
                    $.getJSON("prova.json", function (data) {
                        console.log("dati caricati dal server: " + data);
                        var elementiDaAggiungere = [];
                        $.each(data, function (indice, elemento) {
                            elementiDaAggiungere.push("<li>" + elemento.id + " " + elemento.data + " " + elemento.cliente + " " + elemento.statoatt + "</li>");

                        });

                        var htmlDaAggiungere = elementiDaAggiungere.join("");
                        $('#dati').append(htmlDaAggiungere).show(1000);

                    });

                });

            });


        </script>

----------------

nel body ho aggiunto questo

            <ul id="dati"></ul>
            <div id="loading">Loading ...</div>
            <button id="carica" class="button">Carica</button>

Tramite la pressione del bottone mi carica i dati richiesti, funziona ma me li espone chiaramente in riga...così...123456 13/06/2016 cliente attivo..
Ora non saprei come fare a impostare il tutto facendo in modo che mi prenda i dati (come fa ora) ma me li suddivida in una tabella col nome intestazione sopra e i dati sotto...
ecco un esempio....

http://www.jqueryscript.net/images/jQuery-Plugin-For-Converting-Table-Into-JSON-Data-Table-to-JSON.jpg

piccolo edit, nel body ho messo questo

                                <div class="table">
            <!-- <div class="col-md-10 col-md-offset-1"> -->
            <div>
                <table id="example" class="table toggle-circle-filled" cellspacing="0" width="100%">


                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Data</th>
                            <th>Cliente</th>
                            <th>Stato</th>
                        </tr>
                    </thead>


                    <tbody></tbody>
                </table>

Grazie in anticipo

[DF24]

Chiedo scusa avevo letto il regolamento generale, semmai riformulo la domanda

[ciro78]

Chiedo scusa avevo letto il regolamento generale, semmai riformulo la domanda

non è necessario. per questa volta ho modificato io. continua pure questa