<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_info').DataTable();
      } );
    </script>
    <script type="text/javascript">
        $(document).ready( function() {
               // $ident= getCookie("IdentifiantActuel");
                $.getJSON('https://eden.imt-lille-douai.fr/~liang.wu/API_LOGIN/identite/read.php',
                    function(data){
                        table = $('#tbody_info');
                        table.html('');

                        $.each( data.records, function( key, val ) {
                            table.append('<tr><td>'+val.id+'</td><td>'+val.login+'</td><td>'+val.password+'</td><td>'+val.pseudo+'</td><td>'+val.age+'</td><td>'+val.poids+'</td><td>'+val.taille+'</td><td>'+val.sexe+'</td><td>'+val.niveaudusport+'</td></tr>');
                        });

                    }
                );
    </script>
</head>

<section id="profil_contenu" style="display : flex; flex-direction : row; ">

<div style="margin-right:100px">

<table id="table_info" class="dataTable" style="color : #212529; "> 
    <thead>
            <tr>
                <th>id</th>
                <th>login</th>
                <th>password</th>
                <th>pseudo</th>
                <th>âge</th>
                <th>poids(kg)</th>
                <th>taille(cm)</th>
                <th>sexe</th>
                <th>niveau_du_sport</th>
                <th>Action</th>
            </tr>
    </thead>
    <tbody id="tbody_info"><tbody>
</table>
</div>
</section>