<head>
    <meta charset="utf-8"/>
        <script src="https://code.jquery.com/jquery-3.4.1.js"   integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="   crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#table_aliments').DataTable();
            resetForm();
        } );
        function resetForm() {
                document.getElementById("id").value=""
                document.getElementById("aliment").value = "";
                document.getElementById("calories").value = "";
                document.getElementById("cat").value = "";
                document.getElementById("submit_button").value="Ajouter";
        };
        

        </script>
    <script type="text/javascript">
            $(document).ready( function() {
                    $.getJSON('https://eden.imt-lille-douai.fr/~charlotte.raulin/Projet/api/read_indicateur.php',
                        function(json){
                            table = $('#tbody_indicateur');
                            table.html('');
                            echo(json);
                            echo(json[0]);

                            // cf. https://api.jquery.com/jQuery.getJSON/
                            // $.each( json, function( key, val ) {
                            //     // table.append('<tr><td>'+val[0]+'</td><td>'+val[1]+'</td><td>'+val[2]+'</td><td><button '+
                            //     //     'onclick="onEdit('+val[0]+',\''+val[1]+'\',\''+val[2]+'\')">Modifier</button></td></tr>');
                            //     table.append('<tr><td>'+val[0]+'</td><td>'+val[1]+'</td><td>'+val[2]+'</td><td>'+val[3]+'</td><td>'+val[4]+'</td></tr>');
                            // });
                        }
                    );
                });            
    </script>
</head>

<div style="margin-right:100px">
    <table id="table_indicateur" class="dataTable" style="color : #212529; ">

        <thead>
            <tr>
                <th>Fruit</th>
                <th>Legume</th> 
                <th>Feculent</th> 
                <th>Laitage</th> 
                <th>Sucrerie</th>
            </tr>
           
        </thead>
        <tbody id="tbody_indicateur"><tbody>

        </table>
</div>